Sass

2024年2月28日 140次阅读 来源: 石奇聪

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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞