Sass.vs.Less | 简介之基础语法

 定义变量

    在 sass 中可以定义一些后期统一使用修改的变量

语法:

    定义变量: $名字: 值;

      注意: 值得位置不需要引号包裹

      你所定义得变量再编译得时候不会被解析得

      只有当你使用得时候才会被解析出来

使用变量

      1. 直接使用再值得位置

        举例: float: 变量;

        直接使用就可以, 注意带上 $

      2. 再样式名或者选择器上面使用

        插值表达式

        举例: margin-left: 10px;

        相当于把变量的值插入到另一个内容中间

        把变量使用 井号(#)大括号({}) 包裹起来

    使用变量得位置

      将来一旦变量修改

      每一个使用该变量位置都会进行修改

3. if 分支语句

    可以根据条件来决定添加或者不添加这个样式

可以根据条件来决定添加样式得值

div {  font-size: 100px;  color: red;  margin: 10px 20px;}

sass 循环

    循环生成一些样式结构

 1. for 循环得第一种

js:  for (var i = 0; i < 10; i++) {}

使用方法: @for 变量 from 开始数字 to 结束数字 {}

    注意: 包含开始数字, 不包含结束数字

    循环内部可以使用任何一种形式来使用变量

2. for 循环得第二种

    使用方法: @for 变量 from 开始数字 through 结束数字

    根据数字来进行循环执行, 包含开始数字, 也包含结束数字

3. each 语法循环

    使用方法: @each 变量(数组里面得每一个) in 数组 { 内容 }

    根据数组里面有多少个成员执行多少次

      index() 函数,

      index(数组, 每一项)

      返回对应这一项得索引

大部分使用循环做

    背景图片得设置

  背景图定位

sass 嵌套语法

    把你的 css 写的和 html 结构一模一样

1. 基本嵌套

    选择集得基本嵌套

    规则: 再一个选择集里面直接书写后代选择集

2. 子代嵌套

    直接再你需要自带嵌套得位置

    书写自带选择器得

3. 连接符选择器嵌套

    sass 再选择器里面提供了一个符号叫做 &s

    表示当前选择集得选择器

    连接符一半用来连接伪类和伪元素

4. 群组选择器嵌套

    一个嵌套多个

      在一个基础选择器里面嵌套一个群组选择器

  5. 属性嵌套

    和选择器没有什么关系只与属性名有关系

      前提: 属性名中带有中划线(-) 才可以嵌套

 5-1. 基本属性嵌套

    + 属性名: {

      嵌套内容: 值;

    }

  5-2. 带有值得嵌套

    + 属性名: 值 {

      嵌套内容: 值;

    }

  5-3. 多属性嵌套

    + 前提: 需要包含两个以上得中划线

    + 属性名: {

      嵌套内容: {

        嵌套内容: 值

      }

    }

sass 混合器语法

    叫做混合器, 实际上是定义一个函数

    js: function 函数名() {}

    sass: @mixin 混合器名字() {}

1.基础混合器得定义和使用

  使用方法: @mixin trans {

    -webkit-transition: all 1s 0s linear;

    -moz-transition: all 1s 0s linear;

    -ms-transition: all 1s 0s linear;

    -o-transition: all 1s 0s linear;

    transition: all 1s 0s linear;

  }

  注意: 定义好的混合器是不会被编译得

  基本使用

    在你需要这一段代码得位置

    书写 @include 混合器名字;

 2. 定义一个带有参数得混合器

  使用方法: @mixin trans(变量 1, 变量 2, ...) {

    使用得时候, 直接使用变量

  }

    你需要使用这个混合器得位置  使用这个混合器

    书写: @include trans(参数 1, 参数 2, ...)

    注意: 必须每一个参数都书写

h2 {  -webkit-transition: height 1s 0s linear;  -moz-transition: height 1s 0s linear;  -ms-transition: height 1s 0s linear;  -o-transition: height 1s 0s linear;  transition: height 1s 0s linear;}

3. 带有参数默认值得混合器

    你传递了参数使用你传递得, 你没有传递使用默认值

    +JS: function fn(a=100, b=200) {}

  定义混合器得语法:

    @mixin trans($p: all, $t: 1s, $d: 0s, $tf: linear) {

      内容

    }

 使用得时候

    1. 按照顺序传递参数, 不传递的使用默认值

    2. 使用得时候, 单独指定给哪一个形参赋值

      @include trans($tf: ease-in);

      只给 $tf 这个变量赋值

      其他没有赋值得按照默认值进行设置

h3 {  -webkit-transition: all 10s 0s ease-in;  -moz-transition: all 10s 0s ease-in;  -ms-transition: all 10s 0s ease-in;  -o-transition: all 10s 0s ease-in;  transition: all 10s 0s ease-in;}