本文主要是介绍sass: 变量与mixin，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
在css中使用模块,过多的css文件再加会产生很多http请求，影响用户体验。但是在sass中可以解决该问题。
功能模块的命名
_layout.scss
_variables.scss
引入功能的scss的命名
index.scss
other.scss
引入模块: 把每个功能模块独立成一个文件，引入到功能的scss，再使用sass工具打包成css文件
@import "模块名字"
@import "_layout.scss"; 注释: 在scss中可以使用两种注释，一种可编译到css文件中，一种删除不编译到css文件中
/**/ 可以编译
// 删除不编译
变量: 使用$+name: 值
全局变量:可以在全局使用
/* !default 遇到相同变量时不使用 没有遇到才使用 */
$error-color: #ccc !default;
局部变量:只能在局部使用
.alert-error {$text_color: #ddd;background-color: $error-color;color: $text_color;text-shadow: 0 0 2px darken($text_color, 40%)
} Mixins语法: 使用@mixin+name 定义代码块，使用@include+name引入代码块
代码复用
@mixin alert-text {background-color: #f00;color: white;font-variant: small-caps;
}
.error-text {@include alert-text;
}
.has-error:after {@include alert-text;display: inline-block;content: attr(data-error);
} Mixins传参: 可以传参数
@mixin alert-text($color) {background-color: $color;color: white;font-variant: small-caps;
}
.error-text {@include alert-text(blue);
}
.has-error:after {@include alert-text(red);display: inline-block;content: attr(data-error);
} Mixins默认传参
@mixin alert-text($color: pink) {background-color: $color;color: white;font-variant: small-caps;
}
.error-text {@include alert-text;
}
.has-error:after {@include alert-text(red);display: inline-block;content: attr(data-error);
} 多个传参
@mixin alert-text($color1: pink, $color2: pink) {background-color: $color1;color: $color2;font-variant: small-caps;
}
.error-text {@include alert-text(blue);
}
.has-error:after {@include alert-text($color2: black);display: inline-block;content: attr(data-error);
} 在参数中传null值表示删除该属性
@mixin alert-text($color1: pink, $color2: pink) {background-color: $color1;color: $color2;font-variant: small-caps;
}
.error-text {@include alert-text(null);
}
.has-error:after {@include alert-text($color2: null);display: inline-block;content: attr(data-error);
} 传一个块: 块中的为私有选择器
@mixin foo($color) {color: $color;.inner {@content}
}
.btn {@include foo(#c69) {color: red;// 块中的为私有选择器}
}
.btn {@include foo(#ccd)
} 结果为
.btn {color: #c69;
}
.btn .inner {
/* 块中的东西 */color: red;
}.btn {color: #ccd;
} 这篇关于sass: 变量与mixin的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
