02月13, 2018

你不知道的Sass

你不知道的Sass

Sass的代码运行在我们的项目中,主要是运用它的变量、mixin(混合宏)、继承、嵌套等特性。这里讲一讲你所不知道的sass特性。

@mixin

mixin的不足: 不能讲相同的样式代码块合并在一起。

定义:

@mixin border-radius{
  border-radius: 3px;
}

调用:

.box {
  @include border-radius;
  margin-bottom: 5px;
}

.btn {
  @include border-radius;
}

编译:

.box {
  border-radius: 3px;
  margin-bottom: 5px;
}
.btn {
  border-radius: 3px;
}

合并更好

.btn,box{
  border-radius: 3px;
}

%placeholder

%placeholder 声明的代码,如果不被 @extend 调用的话,不会产生任何代码。 优点:通过 @extend 调用的占位符,编译出来的代码会将相同的代码合并在一起

定义:

%mt5 {
  margin-top: 5px;
}

%pt5{
  padding-top: 5px;
}

调用:

btn {
  @extend %mt5;
  @extend %pt5;
}
.block {
  @extend %mt5;
  span {
    @extend %pt5;
  }
}

编译:

.btn, .block {
  margin-top: 5px;
}

.btn, .block span {
  padding-top: 5px;
}

@mixin、.className和%placeholder的选择

  • mixin的使用场景:相同的代码块多次调用并且存在参数传递的情况

  • .className: 基类,所有的样式调用中都有相同的样式调用。

  • %placeholder: 基类额外的样式。

在callcenter的一个小case:margin-right 写在了基类的公共样式中。在不需要调用公共样式的margin-right的样式产生了影响。

[class*="-ico-"]{
    @extend .i-ico;
    display: inline-block;
    z-index: 2;
    font-size: 22px;
    position: relative;
    margin-right: 5px;  
}

这样也许更好

%mr5 {
    margin-right: 5px;  
}
.m-table {
  .i-ico-check,
  .i-ico-unfinish,
  .i-ico-check,
  .i-ico-filter {
    @extend  %mr5;
  }
}

#{} 插值

在一般的情况下,变量只能够作为属性值或者操作数参与运算,比如算数运算或者逻辑运算。如果变量是否可以作为选择器或者属性上?

这样是不被允许的

$attr: border;
p {
    $attr-color: blue;  
}

插值可以简单的理解为 字符串的拼接

p {
    #{$attr}-color: blue;  
}

下面代码的本来意思是想设置字体大小为12px,行高为30px

p {
  $font-size: 12px;
  $line-height: 30px;
  font: $font-size/$line-height;
}

编译后:

p {
  font: 0.4; 
}

使用插值就可以方便的解决

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

关于@规则

@规则有七种,最常见的是

@import`fileName.sass|scss`

@extend`.className`

这里详细讲述其他五种。

1.@media

If a @media directive appears within a CSS rule, it will be bubbled up to the top level of the stylesheet, putting all the selectors on the way inside the rule. This makes it easy to add media-specific styles without having to repeat selectors or break the flow of the stylesheet.

简单来说:如果@media在css的样式中出现,它将冒泡到样式的最顶层,让所有的选择器都在它的内部。

For example:

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

编译出来

.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; } }

本文链接:http://inkzhou.com/post/U-don't-know-Sass.html

-- EOF --

Comments