sass 的学习笔记

1、什么是CSS预处理器,什么是Sass

**(1) **CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。
(2) Sass是一种最早出现的“CSS预编译处理器”,进行网页样式设计,然后再编译成正常的CSS文件。Sass提供了许多便利的写法,大大节省了设计者的时间,使得CSS开发,变得简单和可维护 。

2、Sass与SCSS有什么区别

(1).文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名
(2).语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似
Sass 语法

$font-stack: Helvetica, sans-serif  //定义变量
$primary-color: #333; //定义变量
  body
  font: 100% $font-stack
  color: $primary-color

** SCSS 语法**

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

编译出来的 CSS

body {
 font: 100% Helvetica, sans-serif;
 color: #333;
}

3、sass与scss和纯css写法差别

Sass 和 CSS 写法的确存在一定的差异,由于 Sass 是基于 Ruby 写出来,所以其延续了 Ruby 的书写规范。在书写 Sass 时不带有大括号和分号,其主要是依靠严格的缩进方式来控制的。如:
Sass写法:

body
  color: #fff
  background: #f36

而在 CSS 我们是这样书写:

body{
  color:#fff;
  background:#f36;
}

SCSS 和 CSS 写法无差别,这也是 Sass 后来越来越受大众喜欢原因之一。简单点说,把你现有的“.css”文件直接修改成“.scss”即可使用。

4、Sass 语法格式

这里说的 Sass 语法是 Sass 的最初语法格式,他是通过 tab 键控制缩进的一种语法规则,而且这种缩进要求非常严格。另外其不带有任何的分号和大括号。常常把这种格式称为 Sass 老版本,其文件名以“.sass”为扩展名。来看一个 Sass 语法格式的简单示例。假设我们有一段这样的 CSS 代码:

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

现在用 Sass 的语法格式来编写:

$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

在整个 Sass 代码中,我们没看到类似 CSS 中的大括号和分号。
注:这种语法格式对于前端人员都不太容易接受,而且容易出错。

5、、SCSS语法格式

SCSS 是 Sass 的新语法格式,从外形上来判断他和 CSS 长得几乎是一模一样,代码都包裹在一对大括号里,并且末尾结束处都有一个分号。其文件名格式常常以“.scss”为扩展名。
同样的这段 CSS 代码:

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

我们使用 SCSS 语法格式将按下面这样来书写:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

6、了解sass前世和它安装的前提条件

(1)sass 是基于ruby来发明的 这也决定了他前期的语法结构类似ruby的严格缩进的风格。
(2)我们想利用sass语言 必须要安装ruby的安装包 以ruby为开发环境 来编写sass。
(3)在ruby环境下使用 gem install sass(网络安装方式)gem install 本地sass安装包的路径。

  1. sass的编译
    (1)命令编译
    sass .scss:.css
    (2)GUI图形化界面操作编译
    koala
    (特别注意:)注意ruby 和 koala 安装目录下的核心配置文件的编码格式 为“UTF-8”

7、输出方式

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

8、Sass声明变量

· 变量声明符($) 变量名称:变量值; $width: 300px;
  · 普通变量:声明变量以后可以在全局范围内使用;
  · 默认变量:在值的后面加上!default;

· 全局变量:定义在元素外面的变量
  · 局部变量:定义在元素内部的变量
  · 全局变量的影子:变量名称相同下,局部变量称之为全局变量的影子,局部变量只在局部范围内覆盖全局变量

9、嵌套:

选择器嵌套,

nav{
    a{
      color:red;
        header &{color:green;}
    }
}

属性嵌套,

.box{
    border:{
        top:1px solid red;
        bottom:1px solid green;
    }
}

伪类嵌套

.clearfix{
    &:before,&:after{content:"";display:table;}
    &:after{clear:both;overflow:hidden;}
}

10、混合宏的声明、调用、参数

(1)@mixin:声明混合宏的关键字
  (2)@include:调用混合宏的关键字
  (3)混合宏的传参有三种写法
     1. 只传变量名,调用的时候再去传值
     2. 变量直接在混合宏中赋值
     3. 基于前两种我们也可以传多个参数 注意“ ... ”

11、Sass扩展/继承

·通过关键词 “@extend”来继承已存在的类样式块,从而实现代码的继承。
  ·继承特点:为了减少冗余的代码。
  ·语法:@extend 要继承的对象。

12、占位符

占位符声明关键字:%placeholder
  特点:不被继承就不会编译成css代码

总结:声明方式不同、调用方法不同、使用环境不同

·混合宏:
    声明方式:@mixin           
    调用方法:@include
    使用环境:相同的代码块在不同的环境传递不同的值,可以通过混合宏来定义重复使用的代码块。
    不足:针对相同的样式,会造成冗余(对于)的代码块。
    
·继承:
    声明方式:.class
    调用方法:@extend
    使用环境:相同的代码块不需要传递不同的值,使用Sass的继承来调用已存在的基类。使用继承会将调用相同基类的代码合并到一起。
    不足:如果基类,并不存在于HTML结构时,不管调不调用,都会被编译在css中。

·占位符: 
    声明方式:%placeholder
    调用方法:@extend
    使用环境:和继承类似,不同的是,相同的代码块并没有在基类中存在,而是额外声明。如果不调用以声明的占位符,将不会产生任何样式的代码。如果在不同选择器调用,将会把编译出的相同的css代码合并在一起。

13、插值

·声明插值的关键语法:#{}
  ·特点:Sass获得一个更好的结构体系。比如说想写更干净的、高效的和面向对象的CSS。
  ·是指变量插值,或者变量替换。

$a:(margin,padding);                //声明一个变量
@mixin set-value($side,$value){     //声明一个混合宏 和两个形参
  @each $b in $a{                   //遍历语句  $a是被遍历的对象   $b遍历中当前取到的值
    #{$b}-#{$side}:$value;      //动态生成我们想要的属性
  }
}
.box{
  @include set-value(top,14px);
 }
***编译后的CSS***
.box{
  margin-top:14px;
  padding-top:14px;
}

·当想设置属性值的时候你可以使用字.符串插入进来,另一个有用的用法是构建一个选择器。

        @mixin size($class, $small, $medium, $big){
            .#{$class}-small { font-size:$small; }
            .#{$class}-medium{ font-size: $medium; }
            .#{$class}-big{ font-size: $big; }
        }
        @include size("header-text",12px,20px,40px);
        ***编译后的CSS***
        .header-text-small{ font-size: 12px; }
        .header-text-medium{ font-size: 20px; }
        .header-text-big{ font-size: 40px; }

注释
/类似CSS注释/
//类似JS注释

14、Sass数据类型

数字:1,2,3,10px;
  字符串:有引号字符串(单引号和双引号) 和 无引号字符串;在用插值语句时,有引号字符串将被编译为无引号字符串,方便了在混合指令中引用选择器名。
  颜色:blue、red...;
  布尔:true、false;
  空值:null;
  值列表:用空格和逗号分开的;

15、运算

加法:可以做各种运算,但对于不同类型的单位,在计算时会报错

        .box {
             width: 20px + 8in;
        }   //width: 788px;

减法:和加法类似,碰到不同类型的单位也会报错

       $a:50px;
       $b:10px;
       .box{
           width: $a - $b
       }   //width: 40px;

乘法:能够支持多种单位,但当一个单位同时声明两个值会报错,碰到不同类型的单位也会报错。

        .box {
             width: 10px * 2;
        }   //width: 20px;

除法:除法用/代替 运算的时候要加括号

        .box {
             width: (100px / 2);  
        }   //width:50px;

变量运算
  ·可以使用变量进行运算

        $a:20px;
        $b:10px;
        $c:5px;
        .box{
            width:$a + $b + $c
        }   //width:35px;

颜色运算
  ·红绿蓝各颜色分段单独运算

        p {
            color: #010203 + #040506;
        }   //color: #050709;

字符运算
  ·用"+"对字符串拼接

     div {
         cursor: e + -resize;
     }   //cursor: e-resize;

数字运算
  ·和数学运算一样

        .box {
            width: ((220px + 720px) - 11 * 20 ) / 12 ;  
        }   // width: 60px;   
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容