sass入门初体验

luckyw

接上文less入门初体验,接下来讲讲sasssass有两种文件后缀名,一种是.sass,另一种是.scss。前者类似于ruby的语法规则,没有花括号,没有分号,具有严格的缩进;而后者更贴近于css的语法规则,易于阅读,更具语义性,所以本文采用.scss后缀名来编写sass代码

编译


1、Ruby:
sass是由Ruby语言编写的,所以我们可以通过Ruby来编辑sass代码,首先需要安装ruby,然后再安装sass,之后通过sass命令编译文件

sudo apt install ruby
sudo gem install sass
sass style.scss style.css

sass提供四个编译风格的选项:

nested:嵌套缩进的css代码,默认值
expanded:没有缩进的、扩展的css代码
compact:简洁格式的css代码
compressed:压缩后的css代码

生产环境中一般使用最后一个

sass --style compressed style.scss style.css

变量


变量使用以$开头(这也是我喜爱sass多于less的原因,谁不喜欢money呢?O(∩_∩)O哈哈~,开个玩笑),如果变量需要在字符串中使用,只需要写在#{}中即可

$color:#999;
$side:left;
$bw:2px;
div {
    background-color: $color;
    border-#{$side}-width: $bw;
}

编译后:

div {
    background-color: #999;
    border-left-width: 2px;
}

Mixin(混合)


实现代码块的重用,使用@mixin定义一个代码块,通过@include就可以调用此代码块

@mixin b_r($radius:5px){
    -webkit-border-radius:$radius;
    -mz-border-radius:$radius;
    border-radius:$radius;
}
div1{
    @include b_r();
}
div2{
    @include b_r(10px);
}

编译后:

div1 {
    -webkit-border-radius: 5px;
    -mz-border-radius: 5px;
    border-radius: 5px;
}

div2 {
    -webkit-border-radius: 10px;
    -mz-border-radius: 10px;
    border-radius: 10px;
}

嵌套


less类似,不多介绍

div {
    background-color: #333;
    a {
        text-decoration: none;
        &:hover {
            color: red;
        }
    }
}

编译后:

div {
    background-color: #333;
}
div a {
    text-decoration: none;
}
div a:hover {
    color: red;
}

运算


less类似,不多介绍

$w:1000px;
body {
    width: $w/2;
    div {
        height: 100px*5;
    }
}

编译后:

body {
    width: 500px;
}
body div {
    height: 500px;
}

颜色函数


div {
    color: lighten(#ccc, 10%);
    background-color: darken(#999, 10%);
}

编译后:

div {
    color: #e6e6e6;
    background-color: gray;
}

注释


/* Hello Sass 我依然在这里 */
div1 {
    color: red;
}

// Hello Sass 我不见了
div2 {
    color: green;
}

/*!  Hello Sass 即使压缩了,我依然还在  */
div3 {
    color: blue;
}

编译后:

@charset "UTF-8";
/* Hello Sass 我依然在这里 */
div1 {
  color: red;
}

div2 {
  color: green;
}

/*!  Hello Sass 即使压缩了,我依然还在  */
div3 {
  color: blue;
}
阅读 2k

luckyw
博客文章
677 声望
33 粉丝
0 条评论
677 声望
33 粉丝
宣传栏