前端基础学习之Sass

一、概念

1.Sass是什么?

  • Sass (英文全称:Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言
  • Sass 是一个 CSS 预处理器
  • Sass 是 CSS 扩展语言,可以帮助我们减少 CSS 重复的代码,节省开发时间。
  • Sass 完全兼容所有版本的 CSS
  • Sass 扩展了 CSS3,增加了规则变量混入、选择器、继承、内置函数等等特性
  • Sass 生成良好格式化的 CSS 代码,易于组织和维护
  • Sass 文件后缀为 .scss

2.Sass的特点

  • 兼容CSS:Sass完全兼容所有版本的CSS,可以无缝地使用任何可用的CSS库

  • 特性丰富:Sass拥有比其他任何CSS扩展语言更多的功能和特性

  • 成熟:Sass已经经过其核心团队超过13年的精心打造

  • 行业认可:一次又一次地,行业把Sass作为首选CSS扩展语言

  • 社区庞大:数家科技企业和成百上千名开发者为Sass提供支持

  • 框架:有无数的框架使用Sass构建   比如Compass、Bourbon 和 Susy

3.为什么使用Sass

  • css本身语法不够强大 重复编码导致代码量大 无法实现复用 也不方便维护
  • Sass引入了合理的样式复用机制,增加了规则、变量、混入、选择器、继承、内置函数等等特性

二、Sass语法格式

1.SCSS(Sassy CSS):

  • 仅在 CSS3 语法的基础上进行拓展,所有CSS3 语法在 SCSS 中通用,同时加入 Sass 的特色功能
  • 支持大多数 CSS hacks 写法及浏览器前缀写法 (vendor-specific syntax)和早期的 IE 滤镜写法
  • .scss 作为拓展名

2. Sass(Indented Sass):

  • 是最早的 Sass 语法格式  被称为缩进格式  通常简称 "Sass"  是一种简化格式
  • 使用 “缩进” 代替 “花括号” 表示属性属于某个选择器,用 “换行” 代替 “分号” 分隔属性
  • 也可以使用 Sass 的全部功能,只是与 SCSS 相比个别地方采取了不同的表达方式
  • .sass 作为拓展名

三、Sass变量

1.变量声明:

  • 可把反复使用的css属性值 定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值
  • 使用 $ 符号来标识变量
  • $开头,字母 数字 下划线 - 组成  但不能以数字开头
  • 变量使用前必须声明
  • 变量可以存储:字符串、数字、颜色值、布尔值、列表、null 值

语法:

$variablename:value;

 实例:

/* 定义变量 */
$bgc1: yellow;
$color1: #123456;
/* 使用变量 */
.box2 {
    width: 200px;
    height: 200px;
    background-color: $bgc1;
    color:$color1
}

2.作用域:

  • 全局变量:没有被包含在任意的选择器{}中的变量称为全局变量 任意地方可使用
  • 局部变量:有被包含在任意的选择器{}中的变量称为局部变量 当前{}里面去使用
  • 内层可以使用外层 外层不能使用内层的变量
  • 局部变量变为全局变量:变量值后 ;前 加 !global

3.!global:

  • 使用 !global 关键词来设置变量是全局的
  • 所有全局变量一般定义在同一个文件  如:_globals.scss 然后使用 @include 来包含该文件

4.变量引用:

  • 凡是css属性的标准值可存在的地方,变量就可以使用
  • css生成时,变量会被它们的值所替代,之后如果你需要一个不同的值,只需要改变这个变量的值,则所有引用此变量的地方生成的值都会随之改变
  • 在声明变量时,变量值也可以引用其他变量
  • 一般情况下,你反复声明一个变量,只有最后一处声明有效且它会覆盖前边的值

5.- 与 _

  • 中划线命名的内容和下划线命名的内容是互通的无区别,包括 变量混合器Sass函数 的命名
  • 但是在sass中纯css部分不互通,比如类名、ID或属性名

四、Sass嵌套规则与属性

1.嵌套规则:

  • 将 子级选择器 放在 父级选择器 内部

2.父选择器&

  • 若想要在嵌套的选择器里面使用一个类似 :hover 的伪类用 &
  • 当包含父选择器标识符的嵌套规则被打开时,它不会像后代选择器那样进行拼接,而是&被父选择器直接替换

3.嵌套属性:

  • 有同样前缀的属性名
  • 把属性名从中划线-的地方断开,在根属性后边添加一个冒号: 紧跟一个{ }块,把子属性部分写在这个{ }块中

实例:

.parent {
    width: 300px;
    height: 300px;
    background-color: red;

    // 父元素选择器
    &:hover {
        background-color: yellow;

        a {
            color: #fff;
        }
    }

    .fa {
        $color: yellow;
        width: 260px;
        height: 260px;
        background-color: blue;

        .sn {
            width: 100px;
            height: 100px;
            background-color: green;
        }

        a {
            text-decoration: none;
            color: $color;
            // font-size: 100px;
            // font-weight: bold;
            // font-style: italic;
            // font-family: Georgia, 'Times New Roman', Times, serif; 
            // 属性嵌套
            font: {
                size: 100px;
                weight: bold;
                style: italic;
                family: Georgia, 'Times New Roman', Times, serif; 
            }
        }
    }
}

五、@import

css的@import规则:

  • 允许在一个css文件中导入其他css文件
  • 但只有执行到@import时,浏览器才会去下载其他css文件,这导致页面加载起来特别慢

sass的@import规则:

  • 在生成css文件时就把相关文件导入进来
  • 这意味着所有相关的样式被归纳到了同一个css文件中,而无需发起额外的下载请求
  • 所有在被导入文件中定义的变量和混合器均可在导入文件中使用
  • 不需要指明被导入文件的全名  可以省略 .sass.scss 文件后缀

语法:

@import "filename";

六、@mixin 与 @include

1.概念:

通过sass的混合器实现大段类似样式的重用

  • @mixin 指令允许定义一个可以在整个样式表中重复使用的样式

  • @include 指令可以将混入(mixin)引入到文档中

  • 混入也还可以包含选择器、属性嵌套,以及父选择器

  • 一个mixin可以被多个地方使用

2.向混入传递变量:

(1)混入可以接收参数  可以向混入传递变量(也可直接使用外部变量)

   实例:

@mixin box($color1) {
    color: $color1;
}
.test_color {
    /* 在使用的时候传入实际的值 */
    @include box(pink);
}

(2)混入的参数可以定义默认值

   实例:

/* 没有传值将使用默认值 */
@mixin box($color1: blue) {
    color: $color1;
}
.test_color {
    /* 传值则为红色 */
    @include box(red);
}
.test_color {
    /* 未传值使用默认值为蓝色 */
    @include box();
}

(3)设置可变参数:不能确定一个混入(mixin)或函数(function)使用多少个参数,使用 ... 

  实例:

@mixin box-shadow($shadows...) {
      box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
.shadows1 {
  @include box-shadow(2px 6px 10px #999);
}

七、extend 与 继承

  • 选择器继承是指一个选择器可以继承另一个选择器定义的所有样式
  • 通过 @extend 语法实现
  •  目的是减少重复量 复用代码

实例:

.fa {
    width: 300px;
    height: 300px;
    background-color: red;
    img {
        width: 100px;
        height: 100px;
    }
    div {
        display: flex;
        justify-content: center;
        align-items: center;
        .left {
            flex-shrink: 2;
        }
    }
    &:hover {
        background-color: red;
    }
}
section.fa {
    color: green;
}
.sn {
    @extend .fa;
    // 任何跟.fa有关的组合选择器样式也会被.sn以组合选择器的形式继承
}

八、条件判断语句

1. @if

语法:

@if 条件表达式 { 条件判断成功这里的代码就执行 不成功就不执行 }

实例:

$temp: 100;
// temp > 100 :500px  temp < 100 :300px  temp = 100 :400px
header {
    @if $temp > 100 {
        // 代码是否执行 条件是否成功 条件判断成功 里面的代码才会被使用
        width: 500px;
    }
    @if $temp < 100 {
        width: 300px;
    }
    @if $temp = 100 {
        width: 400px;
    }
}

2. @else if  单分支

语法:   

 @if 条件1 {
        条件1判断成功就执行的代码
    } 
 @else {
        条件1判断不成功就执行的代码
    }

实例:

//  temp > 100:500px  temp<=100:300px
section {
    @if $temp > 100 {
        // 条件判断成功 就执行
        height: 500px;
    }
    @else {
        // 条件判断不成功 就执行
        height: 300px;
    }
}

3. @ else 多分支

语法:

  @if 条件1 {
        条件1判断成功就执行的代码
    } 
    @else if 条件2 {
        条件1判断不就继续判断条件2 条件2 判断成功就执行的代码
    }
    @else if 条件3 {
        条件1 和 条件2判断不就继续判断条件3 条件3 判断成功就执行的代码
    }
    .....

    @else {
        以上所有条件判断不成功就执行的代码
    } 

实例:

// temp > 100 :500px ; temp < 100 :300px ; temp = 100 :400px
footer {
    @if $temp > 100 {
        // $temp > 100判断成功就执行
        line-height: 500px;
    }
    @else if $temp < 100 {
        // $temp > 100判断不成功就继续判断$temp < 100
        line-height: 300px;
    }
    @else {
        // $temp > 100  和 $temp < 100都判断不成功就执行
        line-height: 400px;
    }
}

九、总结

1. 后缀.sass格式

  • Sass 是由buby语言编写的一款css预处理语言,和html一样有严格的缩进风格

  • 因不使用花括号和分号 不被广为接受

  • Sass 是一款强化 CSS 的辅助工具,是对 CSS 的扩展,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、继承(extend)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅

  • 使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目

2. 后缀.scss格式

  • SCSS是一款css预处理语言,SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能

  • 任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件

  • SCSS 需要使用分号和花括号而不是换行和缩进

  • SCSS 对空白符号不敏感,其实就和css3语法一样

3. CSS预处理

  • css预处理器是用一种专门的语言,进行网页的样式设计,之后在被编译为正常的css文件,以供项目使用

  • 使用css预处理语言的好处:使css更简洁、方便修改、可读性强、适应性强、易于代码的维护

4. CSS和scss的关系

  • SCSS 和 CSS 写法无差别

  • 把现有的“.css”文件直接修改成“.scss”即可使用

5. .sass和.scss的关系

  • sass和scss其实是一样的css预处理语言,scss可简单理解是sass的一个升级版本

  • SASS版本3.0之前的后缀名为.sass,而版本3.0之后的后缀名.scss

  • sass时代是有严格的缩进规范并且没有‘{}’和‘;’

  •  而scss则和css的规范是一致的

你可能感兴趣的:(前端开发课程,前端,开发语言,css,css3,html5)