Sass

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