Sass语法介绍高级篇

响应式布局: @media

响应式布局设计的目的是为移动设备提供更好的体验,并且整合从桌面到手机的各种屏幕尺寸和分辨率。

比如,当你缩小网页的时候,网页的布局会跟着改变,这主要使用的是CSS中的media query。

Sass中的@media跟CSS中的区别是:Sass中的media query可以内嵌到css规则中,在生成css的时候才会被提到样式的最高层级。这样做的好处是避免了重复书写选择器或者打乱样式表的流程。

//定义
@mixin col-sm($width:50%) {
  @media (min-width: 768px) {
    width: $width;
    float: left;
  }
}
//使用
.webdemo-sec {
  @include col-sm();
}

对应的css代码如下:

@media (min-width: 768px) {
  .webdemo-sec {
    width: 50%;
    float: left;
  }
}

嵌套问题:@at-root

虽然Sass提供了很棒的嵌套能力,但CSS最佳实践告诉我们,浏览器在解析CSS文件的时候是按从右往左的顺序进行的,也就是说嵌套的代码会从内往外解析,一步步向上查找,直到HTML一级,这样会导致渲染的低效。

而且通过嵌套也有一些副作用:增加了样式修饰的权重,制造了样式位置的依赖。

最佳实践是给每个元素命名,但这样又不如嵌套清晰,易维护。

解决方案,在嵌套的时候使用Sass的at-root指令,明确指定被嵌套的属性输出到样式表的底层。如下,变量里是字体的定义,看这里

.main-sec {
  font-family:$main-sec-ff;
  @at-root {
    .main-sec-headline {
      font: {
        family: $main-sec-ff;
        size: 16px;
      }
    }

    .main-sec-detail {
      font-size: 12px;
    }
  }
}

生成的css文件如下,各个样式之间不存在嵌套关系。

.main-sec {
  font-family: Arial, Verdana, Helvetica, sans-serif;
}
/* line 16, ../sass/screen.scss */
.main-sec-headline {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 16px;
}

/* line 23, ../sass/screen.scss */
.main-sec-detail {
  font-size: 12px;
}

参数校验

为了是col-sm代码块更具健壮性,我们给传入的宽度值增加校验代码如下,这里我们要求传入的width必须为百分值。

@mixin col-sm($width:50%) {
  @if type_of($width) != number {
    @error "$width必须是一个数值类型,你输入的width是: #{$width}.";
  }
  @if not unitless($width) { //非不带单位 == 带单位
    @if unit($width) != "%" { //$width的单位不是%(px和%都是单位)
      @error "$width应该是一个百分值,你输入的width是: #{$width}.";
    }
  } @else { //不带单位
    @warn "$width应该是一个百分值,你输入的width是: #{$width}.";
    $width: (percentage($width) / 100);
  }
  @media (min-width: 768px) {
    width: $width;
    float: left;
  }
}

如果使用compass watch观察这个代码,在输入的width值不是百分值的情况下,会输出相应的错误提示信息。

CSS输出样式

output_style = :expanded or :nested or :compact or :compressed

expanded是默认样式,输出的css是展开的,跟手动书写css没有区别。

nested输出的css文件根据嵌套关系相应的缩进。

compact所有属性写在一行,这种情况下,更多的是关注选择器之间的关系,而不是属性

compressed将样式表压缩以减少空间,不可读。

中文支持

如果你跟我的安装过程一样,然后发现代码中出现中文的时候会报错,即使是注释中的中文也会报错,那么可以参考这个步骤来解决

找到ruby的安装目录,里面也有sass模块,类似这样的路径:

C:\Ruby\lib\ruby\gems\2.2.0\gems\sass-3.4.22\lib\sass

在这里面有个文件叫engine.rb,添加一行代码

Encoding.default_external = Encoding.find('utf-8')

放在所有的require xxxxxx 之后即可。


文字资料来自慕课网课程

推荐阅读更多精彩内容