Sass基础

最近学习了解了哈Sass 但是目前公司项目中还未使用 0.0 所以记录下基础的方便以后查询

• 安装
  ①windows下下载Ruby_installer，next…next… 建议选择安装到全局中，自动加到系统环境变量中。
  ②完成安装后 在开始菜单中打开Start Command Prompt with Ruby
  ③键入 gem -v查看ruby环境是否安装成功
  
  ④安装Sass 键入 gem install sass
  
  ⑤键入 sass -v查看Sass是否安装成功
  

• 基本概念
  ①Sass,也被称为CSS预处理器，它的基本思想就是用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。
  ②Sass是由Ruby语言编写的，所以必须在Ruby环境下安装使用。
  ③Sass文件就是普通的文本文件，里面可以直接使用CSS语法，文件后缀名为.scss,意思是Sassy css。

• 基本用法
  ①变量：Sass允许使用变量，所有的变量以$开头；若变量需要镶嵌在字符串中，就必须需要写在 “#{}” 当中。

  ②计算功能：可以在Sass文件中使用计算算式。

  ③嵌套：Sass允许选择器嵌套，使用于父级子级选择器；属性也可以嵌套，但需注意分割的前属性后面要加 “:”号；在嵌套的代码内，可以使用&引用父元素。

  ④注释：<1> "/* */" <2> " // " <3> " /*! */ "

  ⑤继承：Sass允许一个选择器，继承另一个选择器，使用@extend

  ⑥mixin:有点像C语言的宏，是可以重用的代码块；同时mixin的强大之处在于可以指定参数和缺省值；使用的时候用@extend xxx

  ⑦颜色函数：如lighten() | darken() | grayscale() | compleme()

  ⑧插入文件：Sass用@import命令来插入外部文件。

  ⑨条件语句：@if | @else

  ①自定义函数：@function xx(x){@return ...}

  ②Sass提供四个编译风格的选项:
  <1> nested:嵌套缩进的css代码，这种状态是默认值
  <2> expanded:没有缩进的、扩展的css代码
  <3> compact:简洁格式的css代码
  <4> compressed:压缩后的css代码（生产环境中一般使用它）

  ③循环语句：
  
for循环：@for $x from x to xx{}
while循环：@while xx > 0{}
echo循环：@echo xx in x,xx,xxx{}

  ④小例子：
  

  

  

  

由于没有在实际项目中使用Sass 所以在工程目录下怎么安排 实际也不是好清楚 期待下一个个人项目能使用到Sass 到时候好生研究哈。