第九十九期:scss的变量,插值 ,关键字和函数

·  阅读 611

这里记录工作中遇到的技术点,以及自己对生活的一些思考,周三或周五发布。

封面图

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 源码分析的文档。

全文完,如果喜欢。

请点赞和"在看"吧,最好也加个"关注",或者分享到朋友圈。

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改