Sass

2024年3月26日 220次阅读 来源: 石奇聪

sass介绍

•    SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单且可维护。
•    SASS的本质是一种帮助你简化CSS工作流程的方式，帮助你更容易的维护和开发CSS内容。
    环境搭建及编译指令
•    在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包，大家可以到 Ruby 的官网（http://rubyinstaller.org/downloads）下载对应需要的 Ruby 版本。

•    Ruby 安装文件下载好后，可以按应用软件安装步骤进行安装 Ruby。在安装过程中，个人建议将其安装在 C 盘下，在安装过程中选择第二个选项（不选中，就会出现编译时找不到Ruby环境的情况），如下图所示：
 
•    Ruby 安装完成后，在开始菜单中找到新安装的 Ruby，并启动 Ruby 的 Command 控制面板，如下图所示： 
•    当你的电脑中安装好 Ruby 之后，接下来就可以安装 Sass 了。同样的在windows下安装 Sass 有多种方法。但这几种方法都是非常的简单，只需要在你的命令终端输入一行命令即可。

• 通过命令安装 Sass

  • 打开电脑的命令终端，输入下面的命令：gem install sass • 提醒一下，在使用 Mac
    ，可能需要在上面的命令前加上”sudo”，才能正常安装：

      sudo gem install sass •    如果不能正常安装sass?  •    gem sources --remove https://rubygems.org/  •    gem sources -a

    https://ruby.taobao.org/[如果你系统不支持https,请将淘宝源更换成：gem sources -a
    http://gems.ruby-china.org ] • gem sources -l • gem install sass
    • 检测Sass • sass -v • 升级sass版本的命令行为 • gem update sass • 卸载（删除）sass
    : gem uninstall sass • 基本用法 • sass提供四个编译风格的选项： • nested :
    嵌套缩进的css代码，它是默认值 • expanded:没有缩进的、扩展的css代码 • compact:简洁格式的css代码
    • compressed:压缩后的css代码

sass导入

•    Css本身包含一个指令@import,但是CSS中的@import每次执行都会发送一次新的请求都会消耗一定的资源

SASS中扩展了这个指令，会将包含的编译成一个CSS文件，切割成小的部分（partials）包含进来进行处理。
Partials这样的文件，命名规范是以下划线开头的，这样的SCSS文件不会被编译成CSS文件。
Partials是用来定义公共样式或者组件的样式的，专门用于被其他的SCSS文件import进行使用的.

sass嵌套

•    Sass 中还提供了选择器嵌套功能，但这也并不意味着你在 Sass 中的嵌套是无节制的，因为你嵌套的层级越深，编译出来的 CSS 代码的选择器层级将越深，这往往是大家不愿意看到的一点。这个特性现在正被众多开发者滥用。
•    选择器嵌套为样式表的作者提供了一个通过局部选择器相互嵌套实现全局选择的方法，Sass 的嵌套分为三种：
    •    选择器嵌套
    •    属性嵌套
    •    伪类嵌套(了解)
    •    选择器嵌套

sass变量定义

• SASS中的变量，必须是$符号开头，后面紧跟变量名，变量名称和变量值之间要使用冒号：进行分隔（参考CSS属性和值的设定语法），如果值后面加上[!default]就表示默认值。
引用变量的值，直接使用变量名称，即可引用定义的变量的值。
• 普通变量：定义之后可以在全局范围内使用
• 默认变量：sass的默认变量需要在值的后面加上!default进行标识• 默认变量的覆盖：在默认变量前后，重新声明变量并赋值即可
• 默认变量是基于组件化开发的过程中，进行优化处理的
• 特殊变量：一般情况下，我们定义的变量都是属性值，可以直接使用，但是如果变量作为属性或者其他的特殊情况下，必须使用#{$variable}的形式进行调用。
• #{$varialbe}就是取值的一种特殊形式，符合特殊用法。
•

sass判断语句

• @if指令是SASS中的一个控制指令，用于在表达式满足条件(true)的时候输出指定的样式，在不满足条件（false）或者表达式为null的情况下输出其他的样式
@if条件{

     //当条件为真时执行的样式

}
同样，也可以通过@else if 和@else 指令结合，进行多条件的判断
*

• sass数组/map（了解）

*
• list表示列表类型的值
在CSS中就是表示属性的一串值
列表中的值可以使用空格或者逗号分隔，如
• border:#ccc solid 1px;值就是列表
• font – family:Courier , “Lucide Console”,monospace;值也是列表
• 列表中可以包含其他的列表，如：
• padding(10px 5px) (5px 5px);可以用括号分开，编译成css时会去掉这些括号
• map就是列表项目中带名称的列表
• $map : (key1 : value1,key2:value2,key3:value3)
• $var (key1:value1,key2:value2..):声明一个Map
• length($map):获取map中的元素对个数
• map-get($map,key):获取$map中名称为key的值
• map-keys($map):获取指定$map中所有的key
• map-values($map):获取指定$map中所有的value
• map-has-key($map,key):判断在$map中是否包含指定的key
• map-merge($map1,$map2):将$map1和$map2合并在一起
• map-remove($map,key):将指定名称的key从$map中移除

• sass循环语句*

• @for指令在SASS中用于重复处理一组指令
• 有两种表现形式
• @for $var from <开始值> through < 结束值>
• @for $var from <start> to <end>
• to和throuch都是表示一个区间，唯一的区别就是停止循环的地方不一样。$var可以是任意一个变量名称如$i，<start>和<end>是SASS表达式并且必须是整数
• @each在SASS中主要被用来进行列表或者映射数据的循环
• 主要表示形式：@each $var in <list>
• $var可以是任意变量名称，<list>是SASS表达式并且必须是list.
• sass-mixin函数(宏)
• sass中可以通过@mixin声明混合，可以传递参数，参数名称以$开始，多个参数之间使用逗号分隔，@mixin的混合代码块由@include来调用.
• sass-function介绍
• 函数的功能主要是数据的运算，SASS中可以将一些值交给函数进行处理，具体的处理方式由定义的函数具体的设计确定。
• @function 函数名称（参数列表）{

    //数据处理

}

sass继承

• SASS允许一个选择器，继承另一个选择器。比如，现有class1：
　　.class1 {
　　　　border: 1px solid #ddd;
　　}
class2要继承class1，就要使用@extend命令：
　　.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
　　}

<————————————–end———————————————->

    原文作者：石奇聪
    原文地址: https://segmentfault.com/a/1190000013499756
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞