郑州网站建设zhuotop,成都网站开发价格,asp.net 窗体网站,产品设计优秀网站SCSS优点#xff1a;编写清晰、无冗余、语义化的CSS#xff0c;减少不必要的重复工作 1、变量声明#xff08;$#xff09;和使用2、使用 代替父元素3、在HTML中使用 :style{--name: 动态值}自定义属性#xff0c;在SCSS中用var(--name)函数绑定动态变量值#xff… SCSS优点编写清晰、无冗余、语义化的CSS减少不必要的重复工作 1、变量声明$和使用2、使用 代替父元素3、在HTML中使用 :style{--name: 动态值}自定义属性在SCSS中用var(--name)函数绑定动态变量值4、混合器mixin和使用include5、给混合器mixin定义参数并使用include传参6、使用 extend继承 公共类元素名、.class7、使用 function 和 for 循环语句8、使用 each 循环 1、变量声明$和使用
// 用$声明变量
$color: red;// 直接使用变量
span{ color: $color; }
p{ background: $color; }2、使用 代替父元素
a{color: red;:hover{color: green;}
}3、在HTML中使用 :style{--name: 动态值}自定义属性在SCSS中用var(--name)函数绑定动态变量值
p v-for(item, index) in dataList :keyindex :style{--color: item.color} {{item.name}}/pp{color: var(--color);
}data() {return {dataList: [{name: 红色, color: red},{name: 蓝色, color: blue},{name: 绿色, color: green}]}
}4、混合器mixin和使用include
// mixin声明混合器: 圆角边框mixin round-radius{border-radius: 10px;background: red;
}// 使用include 混入一段重用样式的代码p{ width: 200px;height: 100px;include round-radius; // include 使用变量
}5、给混合器mixin定义参数并使用include传参
// mixin声明混合器: a不同状态的颜色参数mixin link-colors($normal, $hover, $visited) {color: $normal;:hover { color: $hover; }:visited { color: $visited; }
}// include 使用变量并传入实际参数a {include link-colors(blue, red, green);
}//Sass编译后最终生成的是a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }6、使用 extend继承 公共类元素名、.class
//通过选择器继承继承样式
.error {border: 1px solid red;background-color: #fdd;
}.seriousError {extend .error; // 继承border-width: 3px;
}7、使用 function 和 for 循环语句
for 指令可在限制的范围内重复输出格式每次按要求变量的值对输出结果做出变动。
包含两种格式
for $var from start through end 代表 [ start, end ]
for $var from start to end 代表 [ start, end }不包含end
另外$var 可以是任何变量如 $istart 和 end 必须是整数值。用法一
for $i from 1 through 3 {.item-#{$i} { width: 2em * $i; }
}// 编译为
.item-1 { width: 2em; }
.item-2 { width: 4em; }
.item-3 { width: 6em; }用法二
// 使用scss随机添加 box-shadow,参数 n 个数range 范围function multiple-box-shadow($n, $range) {$value: #{random($range)}px #{random($range)}px #FFF;for $i from 1 through $n {$value: #{$value} , #{random($range)}px #{random($range)}px #FFF;}return unquote($value); // 去掉引号
}#stars {width: 1px;height: 1px;box-shadow: multiple-box-shadow(700, 2000);
}利用box-shadow随机画出小方块组成星空
8、使用 each 循环
each $color in red, blue, green{.#{$color}-icon {background-image: url(/images/#{$color}.png);}
}// 编译为
.red-icon {background-image: url(/images/red.png);
}
.blue-icon {background-image: url(/images/blue.png);
}
.green-icon {background-image: url(/images/green.png);
}
