Sass 语法笔记

css 向 78

SASS 作为一种 CSS 的开发工具，可以有效地提高生产效率，本文对其常用语法做一个笔记，方便日后查阅。
 官方提供的在线转换器

基本语法

变量

所有的变量以$开头； 

$天依蓝: #66ccff;
div {
    color: $天依蓝;
}
上述代码相当于 CSS 中的：
div {
  color: #66ccff;
}

如果变量出现在字符串之中，则需要使用#{}包裹变量 

$side: left;
.rounded {
     border-#{$side}-radius:5px;
}

上述代码相当于 CSS 中的：
.rounded {
  border-left-radius: 5px;
}

计算功能

SASS 允许使用算术式 

$var: 0.5;
body {
    margin: (14px/2);
    right: 10px+50px;
    width: $var * 100%;
}
上述代码相当于 CSS 中的：
body {
  margin: 7px;
  right: 60px;
  width: 50%;
}

嵌套写法

SASS可以使用嵌套写法，比如当你想写下面的 CSS 代码时 

div p {
    border-color:red;
}

你可以这样写： 

div{
    p{
        border-color: red;
    }
}

属性也可以嵌套，但是要注意需要有 :跟在属性的后面，不能省略； 

div{
    p{
        border:{
          color: red;
        }
    }
}
下面是另外一个例子
div{
    p{
        border:{
          left:{
            radius: 5px;
          };
        }
    }
}

嵌套的代码中，可以用&引用父级元素，比如伪类：a:hover可以写成： 

a {
    &:hover {
    color: #66ffcc;
    }
}

注释

SASS 有三种注释

  1. 单行注释 //comment 这种注释只保留在 SASS 源文件中，编译后就会被省略。
  2. 标准 CSS 注释 /* comment */ 此种注释会保留到编译后的文件。
  3. 重要注释 /*! 重要注释 */即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

代码重用

继承

使用@extend进行继承 

.class{
    border: 1px solid red;
}

class2 要继承 class1
.class2 {
    @extend .class1;
    font-size:120%;
}

Mixin

类似于C语言的宏（macro），是可重用的代码块。
 使用@mixin来定义一个代码块
 使用@include来调用代码块 

@mixin top {
    margin-top:10px;
}

div {
    @include top;
}

Mixin 最强大的地方在于可以指定参数和缺省值 

@mixin top($var:10px) {
    margin-top: $var;
}
可以在使用中，根据需要传入合适的参数：
div {
    @include top(20px);
}

颜色函数

SASS的颜色函数大的方面主要分为RGB、HSL和Opacity三大类函数，当然其还包括一些其他颜色函数，比如说adjust-color、change-color等等。这里记录几个常用的。

RGB

rgba()函数

rgba()函数主要用来将一个颜色根据透明度转换成rgba颜色。其语法有两种格式： 

rgba($red,$green,$blue,$alpha)//将一个rgba颜色转译出来，和未转译的值一样
rgba($color,$alpha) //将一个Hex颜色转换成rgba颜色

rgba($color,$alpha),一个参数是需要转换的颜色，他可以是任何颜色的表达方式，也可以是一个颜色变量；第二个参数是颜色的透明度，其值是0~1之间。该方法主要用语的场景是：得知了一个颜色比如#f36，要给这个颜色加一个透明度；CSS中不能直接获得目标效果，而用Sass就比较容易 

//CSS
color: rgba($f36,0.5);//这是无效的写法

//SCSS
.rgba {
    color: rgba(#f36,.5);
}
SCSS文件转义出来就是
.rgba {
  color: rgba(255, 51, 102, 0.5);
}
Mix函数

mix()函数是将两种颜色根据一定的比例混合在一起，生成另一种颜色。 

mix($color-1,$color-2,$weight);

$color-1和$color-2指的是你需要合并的颜色，颜色可以是任何表达式，也可以是颜色变量。$weight合并的比例，默认值为50%，其取值范围是0~1之间，如果取值是25%,这意味着第一个颜色所占比例为25%，第二个颜色所占比例为75%。

HSL

HSL给我们带来了一个更直观的颜色控制，“HSL”所表示的是“H:色相”，“S：饱和度”，“L：亮度”。色相是在色盘上的颜色，颜色的选择是使用饱和度：“0度是红色”，“120度为绿色”和“240度为蓝色”。

lighten() & darken()函数

lighten()和darken()两个函数都是围绕颜色的亮度值做调整的，其中lighten()函数会让颜色变得更亮，与之相反的darken()函数会让颜色变得更暗。这个亮度值可以是0~1之间，不过常用的一般都在3%~20%之间。 

$baseColor: #ad141e;
.lighten {
    background: lighten($baseColor,10%);
}
.darken{
    background: darken($baseColor,10%);
}
转义过后的CSS代码如下：
//CSS
.lighten {
  background: #db1926; 
}

.darken {
  background: #7f0f16; 
}
saturate() & desaturate()函数

这两个函数是通过改变颜色的饱和度来得到一个新的颜色，他们和前面介绍的修改亮度得到新颜色的方法非常相似。 

//SCSS
.saturate {
  background: saturate($baseColor,30%);
}
.desaturate {
  background: desaturate($baseColor,30%);
}
转义过后的CSS代码如下：
//CSS
.saturate {
  background: #c1000d; 
}

.desaturate {
  background: #903137; 
}
adjust-hue()函数

这个是通过调整颜色的色相换算一个新颜色。他需要一个颜色和色相度数值。通常这个度数值是在-360deg至360deg之间，可以是百分数： 

//SCSS
.adjust-hue-deg {
  background: adjust-hue($baseColor,30deg);
}
.adjust-hue-per {
  background: adjust-hue($baseColor,30%);
}

//CSS
.adjust-hue-deg {
  background: #ad5614; 
}

.adjust-hue-per {
  background: #ad5614;
}
grayscale()函数

这个函数会颜色的饱和度值直接调至0%，所以此函数与desaturate($color,100%)所起的功能是一样的。一般这个函数能将彩色颜色转换成不同程度的灰色。例如：

complement()函数

complement()函数可以在原色上得到一个补充色。这个函数与adjust-hue($color,180deg)取得的效果是一样的。

invert()函数

invert()函数也是一个神奇的函数。根据颜色的R、G和B单独进行反相，然后合并到一起，当然其中的透度值A也可以结合进来。

Opacity

alphpa()和opacity()

alphpa()和opacity()函数很简单，这个函数的主要功能是用来获取一个颜色的透明度值。如果颜色没有特别指定透明度，那么这两个函数得到的值都会是1。

opacify() & fade-in()函数

这两个函数是用来对已有颜色的透明度做一个加法运算，会让颜色更加不透明。其接受两个参数，第一个参数是原始颜色，第二个参数是你需要增加的透明度值，其取值范围主要是在0~1之间。当透明度值增加到大于1时，会以1计算，表示颜色不具有任何透明度。
 其中fade-in()函数又名fade_in()函数。其所起作用等效。

transparentize() & fade-out()函数

transparentize()和fade-out()函数所起作用刚好与opacify()和fade-in()函数相反，让颜色更加的透明。这两个函数会让透明值做减法运算，当计算出来的结果小于0时会以0计算，表示全透明。

插入文件

使用@import来插入外部文件 

@import 'path/filename.scss'

如果插入的是 css 文件，那么则等同于 css 的 import 指令 

@import "foo.css";

高级用法

条件语句

使用 @if和@else来进行判断 

　p {
　　　　@if 1 + 1 == 2 { border: 1px solid; }
　　　　@if 1 < 2 { border: 2px dotted; }
　　}

　@if lightness($color) > 30% {
　　　　background-color: #000;
　　} @else {
　　　　background-color: #fff;
　　}

循环语句

循环语句有三种，@for while each 

//for
@for $i from 1 to 10 {
    .border#{$i}{
         border:#{$i}px solid red; 
    }
}

//while
$i:3;
@while $i>0 {
    .item#{$i} {
        width:2px * $i;
    }
    $i:$i - 1;
}
//each
@each $member in a, b, c, d {
    .#{$member} {
　　    background-image: url("/image/#{$member}.jpg");
    }
}

自定义函数

使用 @function定义自定义函数 

@function plusone($n) {
    @return $n + 1;
}
button{
    width:plusone(19px);
}
Comments
Write a Comment