这里记录工作中遇到的技术点，以及自己对生活的一些思考，周三或周五发布。
封面图
scss变量
在编写CSS代码时，我们必须在每个地方重复相同的值和颜色。变量使我们能够在单个位置定义常用值，并解决代码中重复相同值的问题。
创建viaribles.scss文件
@import 'compass/utilities/color/contrast';
// scss-lint:disable ColerKeyword
$warning-color:orange;
$waring-font-color:contrast-color($warning-color)
.button-warning{
background-color: $warning-color;
border-color: darken($warning-color, 20%);
border-radius: 20px;
color: $waring-font-color;
padding: 20px;
&:hover{
background-color: darken($warning-color,30%)
}
};
然后通过下面的命令编译它。
scss --compass viariables.scss variables.css
--compass 会去加载compass相关的依赖。
此时，我们创建index.html
<button class='warning'>warning</button>
引入编译后的variables.css，则看到按钮如下：
我们定义了一些变量，这样，当样式需要改变时，我们只需要修改对应的变量值，然后重新编译scss即可。
变量的定义以$符号开始，；分号结束。
$variable:value;
变量的名字可以使用连字符和下划线。
除了SassScript支持的数据类型之外，任何其他有效的CSS值都可以分配给变量。SassScript支持七种数据类型：
- 数字
- 带引号和不带引号的字符串
- 颜色
- 布尔值
- 空值
- list
- map
在上面的例子中，darken()函数用来加深颜色。contrast-color()函数用来设置对应的属性。
变量的作用域
当我们真正使用变量时，有一点需要明白的是，变量是有作用域的。
定义在全局，则是全局变量，全局可用。定义在选择器内部，则是本地变量。本地变量只在嵌套的选择内部可用。比如：
$primary:red;
.link{
$primary green;
color:$primary;
&:hover{
color:$primary;
}
}
p{
color:$primary;
}
编译后则是这样：
.link{
color:green;
}
.link:hover{
color:green;
}
p{
color:red;
}
在link选择器内部，使用了内部定义的变量。
变量覆盖
在同一个作用域定义同一个变量，变量被覆盖。术语叫重载。比如：
$primary:red;
.link{
color:$primary
}
$primary:green;
.other-link{
color:$primary;
}
编译后：
.link{
color:red;
}
.other-link{
color:green;
}
!global关键字
!global关键字用来提升局部变量的权限，将局部变量提升到全局。
$primary:red;
.link{
$primary:green !global;
color:$primary;
}
.other-link{
color: $primary;
}
编译后：
.link {
color: green; }
.other-link {
color: green; }
/*# sourceMappingURL=variables.css.map */
如果我们使用了一个未定义的变量，编译时也会报一个undefined的错误。
scss 中的运算
定义好了变量，我们可以对它们进行标准的加减乘除以及模运算。
我们创建operations.scss
$color1:blue;
$color2:red;
$distance:10px;
.operations {
color: $color1 + $color2;
width: $distance * 100;
height: ($distance+10) * 5;
font-family: sans- +'serif';
}
然后在终端进行编译：
scss --wathch operations.scss
输出计算后的operations.css
.operations {
color: magenta;
width: 1000px;
height: 100px;
font-family: sans-serif; }
/*# sourceMappingURL=operations.css.map */
！default关键字
!default关键字用来定义默认属性。
$color:red;
$color:green !default;
.green{
color: $color;
}
编译后：
.green {
color: red; }
/*# sourceMappingURL=default.css.map */
当我们移除$color:red;。
.green {
color: green; }
/*# sourceMappingURL=default.css.map */
又变成了绿色。
!default关键字用来定义默认属性。想要覆盖掉默认属性，我们只需要重新定义个相同的属性名。
我们可以定义一些默认的变量，然后通过@import指令导入进来，从而让代码的重用行变得更好。
插值
插值语法在js中很好理解，其实scss也一样，无非是写法略有不同。
创建文件interpolation.scss:
$name:class;
$direction:left;
$units:px;
.#{name}{
margin-#{$direction}:20#{units};
}
编译后：
.class {
margin-left: 20px; }
/*# sourceMappingURL=interpolation.css.map */
scss的插值语法#{}，可以让我们在属性中使用相应的变量。
mixins 混入
创建mixins.scss
@import './layouts/responsive'
$side-bar-background-color: orange !default;
.side-bar{
@include hidden-mobile;
background-color: $side-bar-background-color;
li{
list-style: square;
}
}
.banner{
@include hidden-mobile;
img{
float: right;
}
}
然后创建相应的responsive.scss
@mixin hidden-mobile {
@media (max-width:767px){
display: none !important;
}
}
然后编译mixins.scss
.side-bar{
background-color: orange;
@media (max-width:767px){
display: none !important;
}
}
.side-bar li{
list-style: square;
}
.banner{
@media (max-width:767px){
display: none !important;
}
}
.banner img{
float: right;
}
同时，mixins也支持传入参数，有兴趣的可以自己去了解一下传入参数的写法。
@function指令
@mixin,@include都是scss的指令，我们一起来了解一下@function指令。
@function指令创建的函数不会生成到编译后的css文件中，它只是返回一个值。
用我们经常使用的移动端px转rem做个例子,创建functions.scss:
$browser-context:16;
@function px_to_rem($pixels,$context:$browser-context){
@return ($pixels/$browser-context)*1rem;
}
h1{
font-size: px_to_rem(20);
}
编译后
h1 {
font-size: 1.25rem; }
/*# sourceMappingURL=functions.css.map */
当然，在函数中，我们还可以使用@if指令根据不同的条件执行不同的逻辑，这里就 不再赘述了。
总结
这里简单介绍了scss中的变量，!global和!default
关键字，以及插值语法和函数的写法。
后面将介绍选择器以及模块儿相关的内容
最后
- 公众号《JavaScript高级程序设计》
- 公众号内回复”vue-router“ 或 ”router“即可收到 VueRouter源码分析的文档。
- 回复”vuex“ 或 ”Vuex“即可收到 Vuex 源码分析的文档。
全文完，如果喜欢。
请点赞和"在看"吧，最好也加个"关注"，或者分享到朋友圈。
