SCSS の利点: 明確で冗長かつセマンティックな CSS を記述して、作業の不必要な重複を削減します。
- 1. 変数宣言(`$`)と使い方
- 2. 親要素の代わりに `&` を使用します
- 3. HTML で属性をカスタマイズするには `:style={'--name': 動的値}` を使用し、SCSS で動的変数値をバインドするには `var(--name)` 関数を使用します。
- 4. ミキサー (`@mixin`) と使用 (`@include`)
- 5. ミキサーのパラメーターを定義し (`@mixin`)、パラメーターを渡すために (`@include`) を使用します。
- 6. (`@extend`) を使用してパブリッククラス (要素名、.class) を継承します。
- 7. `@function` および `@for` ループ ステートメントを使用する
- 8. `@each` ループを使用する
1. 変数の宣言( $)と使い方
// 用`$`声明变量
$color: red;
// 直接使用变量
span{
color: $color; }
p{
background: $color; }
2.&親要素の代わりに使用する
a{
color: red;
&:hover{
color: green;
}
}
3. HTML で:style={'--name': 动态值}カスタム属性を使用し、 var(--name)SCSS の関数で動的変数値をバインドします。
<p v-for="(item, index) in dataList" :key="index" :style="{'--color': item.color}" >{
{item.name}}</p>
p{
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. use ステートメント@functionと@forループステートメント
@for 指令可在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。
包含两种格式：
@for $var from <start> through <end> 代表 [ start, end ]
@for $var from <start> to <end> 代表 [ start, end }，不包含end
另外，$var 可以是任何变量，如 $i；<start> 和 <end> 必须是整数值。
使用法 1:
@for $i from 1 through 3 {
.item-#{
$i} {
width: 2em * $i; }
}
// 编译为：
.item-1 {
width: 2em; }
.item-2 {
width: 4em; }
.item-3 {
width: 6em; }
使用法 2:
// 使用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);
}
ボックスシャドウを使用して小さな正方形をランダムに描画して星空を形成します
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');
}