sass 的学习笔记

来源:http://www.chinese-glasses.com 作者:Web前端 人气:79 发布时间:2020-03-16
摘要:浏览器是不理解sass代码的,因此我们将需要一个sass预处理器来将sass代码转换为标准css,这个过程称为运输。所以,我们需要给一个transpiler(某种程序)一些sass代码,然后得到一些c

浏览器是不理解sass代码的,因此我们将需要一个sass预处理器来将sass代码转换为标准css,这个过程称为运输。所以,我们需要给一个transpiler(某种程序)一些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;
}

Sass由hampton catlin设计,natalie weizenbaum于2006年开发,它可以免费下载和使用。

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;   

增加特性变量Sass支持定义变量,变量以美元符号($)作为开头,用冒号(:)赋值。 支持四种数据类型:字符串数值布尔类型颜色 变量可以用作函数的参数或者是返回值,在解释的过程中,解释器会把变量的值写入最终的CSS文件中。嵌套(Nesting)SCSS 支持嵌套并且支持代码块的嵌套(CSS支持嵌套但不支持代码块的嵌套),它可以清晰的表示元素之间的关系。导入(@import)10bet,Sass 支持@import指令,该指令允许我们将一个文件的内容包含在另一个文件中,该指令包含CSS文件,因此不需要额外的调用HTTP,而由于性能问题,CSS指令每次调用都会创建一个额外的HTTP,在这里Sass就没有这样的问题。混入(mixin)Mixin包含一段合法Sass代码,类似于C语言的宏定义;解释器在调用mixin时会将它扩展成它所包含的完整Sass代码,可以有效的减少代码重复,从而写出的代码更加干净简洁。继承(@extend)该指令允许我们将一组CSS属性从一个选择器共享到另一个选择器。

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

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

 /* 定义原色 */ $defColor1: #f44586; $defColor2: green; /* 使用变量 */ .main_use{ background: $defColor2; //在这里我们可以设置内联注释 }

11、Sass扩展/继承

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

Sass是一个将脚本解析成CSS的脚本语言(SassScript),也是一款CSS预处理器,它减少了CSS的重复,也因此节省了时间。

8、Sass声明变量

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

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

Sass评论:Sass支持标准 CSS 注释 /*comment*/,此外还支持内联注释 //comment。

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;
}

Sass文件类型:Sass文件的扩展名为.scss。

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

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

前者支持大多数 CSS hacks 写法以及浏览器前缀写法,以及早期的IE 滤镜写法,这种格式以 .scss 作为扩展名;后者简称 Sass,是一种简化格式,与 Haml 类似,使用缩进代替花括号来区分代码(属性表示某个选择器)并用换行代替分号分隔属性,用回车将不同规则分隔开,这样相对来说它比 SCSS 更容易阅读且书写也较为快速,它以 .sass 作为扩展名。

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注释

本文由10bet发布于Web前端,转载请注明出处:sass 的学习笔记

关键词:

上一篇:前端的正则表达式:基本概念

下一篇:没有了

最火资讯