sass学习笔记

目录

一、css预处理器 SASS

二、预处理器  scss语言

1.变量

2.数据类型

3.运算符

4.流程控制

5.函数

6.语言本身独有的特性

三、混合宏

四、占位符   % 优点:高效  缺点:不能接受参数

五、响应式

sass安装使用

---

注：    1、用submit编辑器会有问题，用webstorm编辑器

            2、所有的css代码都是通过后缀为scss的文件生成的

     3. //引入混合宏      @import "mixins";

Index.html  index.scss  mixins.scss是自己建的

Index.css是通过监测生成的

一、css预处理器 SASS

      新建 index.scss

打开Cmd

1. 安装 cnpm  install  –  g  node-sass
2. 查看是否安装成功 node-sass –v
3. 监测某个css文件

node-sass  -w  index.scss  index.css  --output-style  expanded

监测完成之后再index.scss中写代码会在index.css中生成相应的代码

二、预处理器  scss语言

1.变量

      1)变量定义 $theme-color:#000;

      2)变量使用

            1变量可直接使用在样式表的值部分

                {}里面写的是样式表

            2如果要使用在选择器或者属性部分，需要特定语法插值的支持

            3#{  }插值的用法（重点）

            4变量的默认值相当于把这个值优先级设到最低

              （无论在页面的任何位置重新设置，值都会被覆盖）

                $theme-color:#000 !default;（默认值）

             5局部变量

                     Sass中变量的作用域是块级作用域

                      （一对花括号就是一个块）

                      变量不会输出到css最终生成的样式中

            6sass中的变量，控制结构….不会出现在最终生成的css中

 

2.数据类型

     1数字:

     2字符串：有引号字符串或无引号字符串

     3颜色： blue是颜色（不是字符串）

    4布尔型：

    5空值：

    6值列表：用空格或者逗号分开

3.运算符

      + - * /  (>  <  !=  ==  %)

4.流程控制

      1分支结构if

      2循环结构for  each（常用each）

5.函数

      1、自定义函数

                 @function      add($a,$b){

                     @return $a+$b;

                 }

    2、内置函数（$debug相当于console.log）

 

$size:20px,30px,80px;

$class-name:"header";

$bg-color:blue;

$device-list:"pc","ipad","phone";


$device-map:(

  "pc":20px,

  "pad":30px,

  "phone":80px

);

1.列表中的三个函数


@debug length($device-list);

@debug nth($device-list,2);

@debug index($device-list,"phone");



2.map中的两个函数(取值  取表)


@debug map_get($device-map,"phone");

@debug map_keys($device-map);

@debug map-values($device-map);



3.流程控制 循环for each(常用each)


@for $i from 1 through length($device-list){

  @if($i<2){

    .#{$class-name}-#{nth($device-list,$i)}{

      width: nth($size,$i);

    }

  }

}


@each $v in map_keys($device-map){

  @debug $v;

  @debug map-get($device-map,$v);

}



@each $v in map_keys($device-map){

  .#{$class-name}-#{$v}{

    width: map_get($device-map,$v)/2;

  }

}

6.语言本身独有的特性

 

 

三、混合宏

四、占位符   % 优点:高效  缺点:不能接受参数

五、响应式

 

@media screen and (max-width:800px){
  body{
    background: #d7de4a;
  }
}
@media screen and (min-width:800px){
  body{
    background: #2fb9c2;
  }
}
@media screen and (min-width:1000px){
  body{
    background: #bf76ff;
  }
}

1从大屏到小屏

2从小屏到大屏

 

Scss语法

响应式基本原理

利用css3 transition制作动画

 

sass安装使用

用管理员权限安装（在哪里都可以用）

检查是否安装成功（-v查看版本号）

进入到自建的文件夹，监测

在新建的scss中输入如下代码，观察cmd（写错scss会在cmd中报错），会自动生成一个css文件  里面有scss里面写的内容

打开Cmd

1. 安装 cnpm  install  –  g  node-sass
2. 查看是否安装成功 node-sass –v
3. 监测某个css文件

node-sass  -w  index.scss  index.css  --output-style  expanded

监测完成之后再index.scss中写代码会在index.css中生成相应的代码