css预编译处理器 - Sass

sass是三大css预编译处理器之一！

一、基础语法：

1、变量

• 变量声明：

定义一个名为test的变量

$test: red;

• 变量引用：

给h1标签引用定义的test变量作为color属性的值

h1{
    color: $test;
}

tips: 变量名 test-name 与 test_name 可以互相通用。

2、嵌套css

• 子元素嵌套

h1{
    h2{
        color: red;
    }
    h3{
        color: green;
    }
}
***********编译后等同于***********
h1 h2{
    color: red;
}
h1 h3{
    color: red;
}

• 群组嵌套

h1 a{
    color: red;
}
h2 a{
    color: red;
}
*********编译后等同于*******
h1,h2{
    a{
        color: red;
    }
}

• 嵌套属性

h1{
    border:{
        width: 1px;
        color: red;
        style: solid;
    }
}
// 例外样式写法
h1{
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}
******编译后等用于*******
h1{
    border-width: 1px;
    border-color: red;
    border-style: solid;
}
h1{
  border: 1px solid #ccc;
  boredr-left: 0px;
  border-right: 0px;
}

• 父类选择器 &

h1{
    &:hover{
        color: red;
    }
}

// 编译后

h1:hover{
    color: red;
}

 

3、混合器

混合器主要用于提取高度复用的代码块独立出来，提供需要使用时引入代码块。

• 定义混合器

@mixin test {
    color: red;
    background-color: green;
}
// 也可以定义可传参的混合器
@mixin test2($color,$background:blue) { // $background:blue 意为定义默认值，没有传值时使用
    color: $color;
    background-color: $background;
}

• 使用混合器

h1{
    @include test;
    @include test2(red, blue);
}
混合器test2传参参数可不用按顺序，但必须对应参数名,且不能漏掉参数没有默认值的参数。
h1{
    @include test;
    @include test2($color: red, $background:blue);
}

 

4、继承

.test{
    color: red;
}
h1{
    @extend .test;
}
******编辑后等同于******
.test{
    color: red;
}
h1{
    color: red;
}

 

5、运算

SassScript  在 CSS 属性的基础上 Sass 提供了一些名为 SassScript 的新功能。

SassScript 数据类型

• 数字，1, 2, 13, 10px
• 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
• 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
• 布尔型，true, false
• 空值，null
• 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
• maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

h1{
  font: 10px/8px;             // / 在 CSS 中通常起到分隔数字的用途，无效
  $width: 1000px;
  width: $width/2;            
  width: round(1.5)/2;        
  height: (500px/2);         
  margin-left: 5px + 8px/2px; 
}
// 编译后
p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; 
}

 

6、控制指令

@if

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

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

@for

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
******编译后******
.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

@each

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

**********编译后*********

.puma-icon {
  background-image: url('/images/puma.png'); 
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); 
}
.egret-icon {
  background-image: url('/images/egret.png'); 
}
.salamander-icon {
  background-image: url('/images/salamander.png'); 
}

@while

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}
*********编译后********
.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }

 

 

7、函数

sass提供可以自定义函数，下面先说说sass的内置函数。

1、常用内置函数

• 字符串函数

quote()  // quote($string)给$string前后添加引号
unquote()  // unquote($string) 删除 $string 前后的引号
str-length()  // str-length($string) 返回 $string 的长度
to-upper-case()  // to-upper-case($string) 将$string小写字母转成大写字母
to-lower-case() // to-lower-case($string) 将$string大写字母转成小写字母

• 数字函数

percentage() // percentage($number) 将一个不带单位的数值转成百分比
round()  // round($number) 将$number 四舍五入为整数，$number可带单位
ceil()  // ceil($number) 大于 $number ，向上取整
floor()  // 与 ceil()相反，floor($number) 去除 $number 小数，向下取整
abs() // abs($number)，返回 $number 的绝对值
min()  // min($numbers…)，返回 $number... 的最小值
max()  // max($numbers…)，返回 $number... 的最大值
random()  // random([$limit])，返回一个随机数

• 数组函数

length() // length($list)，返回 $list 的长度值
nth()  // nth($list, $n)，返回 $list 中指定的某个 $n，且 $n必须是大于0的整数
join()  // join($list1, $list2, [$separator]) 将两个列表给连接在起来，组成一个列表
index()  // index($list, $value)，返回 $list 中的 $value所在的位置
list-separator()  // list-separator($list)，返回 $list 中的分隔符

• 其他函数

type-of()  // type_of($value) 返回 $value 的类型

type-of(abc)   => string
type-of("abc") => string
type-of(true)   => bool
type-of(#fff)   => color
type-of(green)   => color

unit()  // unit($number) 返回 $number 所使用的单位

unit(100) => ""
unit(100px) => "px"
unit(3em) => "em"
unit(10px * 5em) => "em*px"
unit(10px * 5em / 30cm / 1rem) => "em*px/cm*rem"

unitless() // unitless($number) 返回 $number 是否带有单位；如果不带单位返回值为 true，带单位返回值为 false

unitless(100) => true
unitless(100px) => false

2、自定义函数

定义函数

@function test($index){
    return unquote($index + 'px');
}

调用函数

h1{
    padding: test(1);
}

 

查看更标准更官方的教程可阅读 sass官方中文文档

 

 

注：个人学习笔记，不喜勿喷