scss一次编译一直生成随机数

‘壹’ 现在sass软件有什么好做的

1、安装sass

1.安装ruby

因为sass是用ruby语言写的，所以需要安装ruby环境
打开安装包去安装ruby，记住要勾选 下面选项来配置环境路径

• Add Ruby executables to your PATH
  安装完成之后继续下一步操作

2.安装sass

在cmd里通过gem安装sass

gem是ruby的包管理工具，类似于nodejs 的npm

• gem install sass1



这个时候如果不翻墙的话是会出问题的，因为：
由于国内网络原因（你懂的），导致rubygems.org存放在 Amazon S3 上面的资源文件间歇性连接失败。这时候我们可以通过gem sources命令来配置源，先移除默认的https://rubygems.org源，然后添加淘宝的源https://ruby.taobao.org/，然后查看下当前使用的源是哪个，如果是淘宝的，则表示可以输入sass安装命令gem install 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


• *** CURRENT SOURCES ***


• https://ruby.taobao.org


• # 请确保只有 ruby.taobao.org


• $ gem install sass1234567



安装好之后执行sass -v就可以看到sass的版本了
实在实在不行，就安装离线文件吧,但是失败率也很高
gem install ./…/sass-3.4.22.gem

2、编译sass文件的方式

1.命令行编译

可以通过cmd命令行执行sass方法来编译
例如：

• sass scss/a.scss:css/a.css1



sass 后面写要编译的sass文件的路径，‘：’后面写的是
要输出的目录及名字

• 需要注意的是：必须有这个文件夹才能在里面生成css
  这样的话写一句执行一次编译一次有些太麻烦
  可以开启一个watch来监听文件变化来进行编译

• sass --watch scss:css1



–watch表示要监听 ：前后的两个都是文件夹，表示scss文件夹的文件改变就编译到css文件夹

2.其他方式编译

除了命令行工具其实还可以用考拉、gulp等工具进行编译，但是ruby和sass是必须要安装的
考拉的方式就不多做介绍了，大家i自己去看一下
gulp的话呢是需要gulp-sass的模块来编译，使用方式类似于gulp-less
这里是网址，点击查看

3、sass四种风格

sass编译的格式

sass编译输出的css有四种格式

• nested 嵌套

• compact 紧凑

• expanded 扩展

• compressed 压缩

这些样式会影响输出的css的格式
简单介绍一下：
css默认输出的嵌套

• ul{


• font-size:15px;


• li{


• list-style:none;


• }


• }123456



—》

• ul {


• font-size: 15px; }


• ul li {


• list-style: none; }1234



紧凑compact
在编译的时候需要执行

• sass --watch scss:css --style compact1



这个时候输出的代码就是

• ul { font-size: 15px; }


• ul li { list-style: none; padding: 5px; }12



compressed 压缩
在编译的时候需要执行

• sass --watch scss:css --style compressed1



—>

• ul{font-size:15px}ul li{list-style:none;animation:all 0.4s}1



expanded 扩展
更像是平时写的css一样
在编译的时候需要执行

• sass --watch scss:css --style expanded1



—>

• ul {


• font-size: 15px;


• }


• ul li {


• list-style: none;


• animation: all 0.3s;


• }1234567



compressed 压缩
更像是平时写的css一样
在编译的时候需要执行

• sass --watch scss:css --style compressed1



—>

• .a{width:100px;height:100px;border:1px solid red}.a .b{background:red}1



4、sass与scss

sass的两个语法版本

sass一开始用的是一种缩进式的语法格式
采用这种格式文件的后缀名是.sass
在sass3.0版本后我们常用的是sassy css语法，扩展名是.scss，更接近与css语法

两个版本的区别

• 后缀名不同 .sass和.scss

• 语法不同，请看下面
  新版：

• /*新版本


• 多行文本注释*/


• //新版本


• //单行文本注释


• @import "base";


• @mixin alert{


• color:red;


• background:blue;


• }


• .alert-warning{


• @include alert;


• }


• ul{


• font-size:15px;


• li{


• list-style:none;


• }


• }123456789101112131415161718



老版本：

• /*新版本


• 多行文本注释


• //新版本


• 单行文本注释


• @import "base"


• =alert


• color:red


• background:blue


• .alert-warning


• +alert


• ul


• font-size:15px


• li


• list-style:none1234567891011121314



5、变量、嵌套、混合、继承拓展

变量的意义

在sass里我们可以定义多个变量来存放颜色、边框等等的样式，这样就可以在下面想要使用样式的时候使用变量了
这样的优点就是便于维护，更改方便

变量的使用

可以通过$来定义变量，在变量名字中可以使用-和_来作为连接，并且-和_是可以互通的，就是用起来一模一样。
变量的值可以是字符串、数字、颜色等等，在变量里还可以使用其他变量，使用的时候直接写变量名就好了
例如

• $primary-color:#ff6600;


• $primary-border:1px solid $primary_color;


• div.box{


• background:$primary-color;


• }


• h1.page-header{


• border:$primary-border;


• }12345678



—》

• div.box {


• background: #ff6600;


• }


• h1.page-header {


• border: 1px solid #ff6600;


• }123456



嵌套的使用

合理的使用嵌套语法，可以使我们编写代码更为快捷
假设我们想写这样的css：

• .nav {


• height: 100px;


• }


• .nav ul {


• margin: 0;


• }


• .nav ul li {


• float: left;


• list-style: none;


• padding: 5px;


• }1234567891011



在sass里我们可以这样写

• .nav{


• height:100px;


• ul{


• margin:0;


• li {


• float:left;


• list-style:none;


• padding:5px;


• }


• }


• }1234567891011



大家会发现，写出来的代码父和子之间都有空格隔开，如果我们需要给a加上伪类的话我们这样写

• .nav{


• height:100px;


• a{


• color:#fff;


• :hover{


• color:#ff6600;


• }


• }


• }123456789



在里面就会出现这样的情况

• .nav a :hover {


• color: #ff6600;


• }123



我们发现在a和:hover之间有了空格，这样是不好的，所以我们需要在写的时候在：hover之前把a加上，这样就需要用到在之类里引用父类选择器的方式，我们可以用&符号代替父类
例如：

• .nav{


• height:100px;


• a{


• color:#fff;


• &:hover{


• color:#ff6600;


• }


• }


• }123456789



这样就好了，下面来个完整的代码：

• .nav{


• height:100px;


• ul{


• margin:0;


• li{


• float:left;


• list-style:none;


• padding:5px;


• }


• a{


• display:block;


• color:#000;


• &:hover{


• color:#f60;


• background:red;


• }


• }


• }


• & &-text{


• font-size:15px;


• }


• }



-----》

• .nav {


• height: 100px;


• }


• .nav ul {


• margin: 0;


• }


• .nav ul li {


• float: left;


• list-style: none;


• padding: 5px;


• }


• .nav ul a {


• display: block;


• color: #000;


• }


• .nav ul a:hover {


• color: #f60;


• background: red;


• }


• .nav .nav-text {


• font-size: 15px;


• }



嵌套属性

我们可以把一些个复合属性的子属性来嵌套编写，加快编写速度，例如

• body{


• font:{


• family:Helvitica;


• size:15px;


• weight:bold;


• }


• }


• .nav{


• border:1px solid red{


• left:none;


• right:none;


• }


• }


• .page-next{


• transition:{


• property:all;


• delay:2s;


• }


• }12345678910111213141516171819



-----》

• body {


• font-family: Helvitica;


• font-size: 15px;


• font-weight: bold;


• }


• .nav {


• border: 1px solid red;


• border-left: none;


• border-right: none;


• }


• .page-next {


• transition-property: all;


• transition-delay: 2s;


• }1234567891011121314



mixin 混合

你可以把它想象成一个有名字的定义好的样式
每一个mixin都有自己的名字，类似于js里的函数定义方法如下

• @mixin 名字(参数1，参数2...){


• ...


• }123



使用方法是在其他选择器css样式里通过@include引入，其实就相当于将mixin里的代码写入到这个选择器的css里，如下：

• @mixin alert {


• color:#f60;


• background-color:#f60;


• a{


• color:pink;


• }


• &-a{


• color:red;


• }


• }


• .alert-warning{


• @include alert;


• }12345678910111213



-----》

• .alert-warning {


• color: #f60;


• background-color: #f60;


• }


• .alert-warning a {


• color: pink;


• }


• .alert-warning-a {


• color: red;


• }12345678910



刚才是没有参数的mixin，mixin也可以拥有参数，需要注意的是：

• 形参的名字前要加$

• 传参的时候只写值的话要按顺序传

• 传参的时候不想按顺序的话需要加上形参名字
  例如：

• @mixin alert($color,$background) {


• color:$color;


• background-color:$background;


• a{


• color:darken($color,10%);//把颜色加深百分之十


• }


• }


• .alert-warning{


• @include alert(red,blue);


• }


• .alert-info{


• @include alert($background:red,$color:blue);


• }12345678910111213



------》

• .alert-warning {


• color: red;


• background-color: blue;


• }


• .alert-warning a {


• color: #cc0000;


• }


• .alert-info {


• color: blue;


• background-color: red;


• }


• .alert-info a {


• color: #0000cc;


• }1234567891011121314



继承拓展 extend

如果我们有一个选择器想要拥有另一个选择所有的东西，不管是样式还是子元素等等，可以使用@extend来继承
大家需要注意的是，++b继承a的时候，a的子元素设置了样式，也会给b的子元素设置样式++，达到完全一样的情况，例如：

• .alert {


• padding:5px;


• }


• .alert a {


• font:{


• weight:bold;


• size:15px;


• }


• }


• .alert-info {


• @extend .alert;


• backgournd:skyblue;


• }12345678910111213



----》

• .alert, .alert-info {


• padding: 5px;


• }


• .alert a, .alert-info a {


• font-weight: bold;


• font-size: 15px;


• }


• .alert-info {


• backgournd: skyblue;


• }12345678910



partials

在以前咱们编写css的时候，一个css引入另一个css需要使用@import，其实这是不好的，会多发一次http请求，影响咱们站点的响应速度。
在sass里，咱们可以把小的sass文件分出去，叫做partials，在某个sass里通过@import ‘partials名’去引入，注意路径哟，这样的话就可以把partials里的代码引到咱们大的sass里一起编译

• 需要注意的是 partials的文件名前要加_

_base.sass :

• body{


• margin:0;


• padding:0;


• }1234



style.sass :

• @import "base";


• .alert {


• padding:5px;


• }


• .alert a {


• font:{


• weight:bold;


• size:15px;


• }


• }


• .alert-info {


• @extend .alert;


• backgournd:skyblue;


• }1234567891011121314



----------->

• body {


• margin: 0;


• padding: 0;


• }


• .alert, .alert-info {


• padding: 5px;


• }


• .alert a, .alert-info a {


• font-weight: bold;


• font-size: 15px;


• }


• .alert-info {


• backgournd: skyblue;


• }1234567891011121314



这样的话我们就可以把模块化的思想引入到sass里了

comment注释

sass里的注释有三种

• 多行注释

• 单行注释

• 强制注释
  多行注释：压缩后不会出现在css里 /*/
  单行注释: 不会出现在css里 //
  强制注释：压缩后也会出现在css里 /! */

6、数据类型与函数

数据类型

在sass里有数字、字符串、列表、颜色等类型
在cmd里 输入

• sass -i1



就会进入到交互模式，输入的计算可以马上得到结果
type-of()可以用来得到数据类型，如：

• type-of(5) -> number1



注意数字类型的可以包含单位，如：

• type-of(5px) -> number1



字符串类型：

• type-of(hello) -> string


• type-of('hello') -> string12



list类型：

• type-of(1px solid red) -> list


• type-of(5px 10px) -> list12



颜色：

• type-of(red) -> color


• type-of(rgb(255,0,0) -> color


• type-of(#333) -> color123



number 计算

• 2+9 -》10


• 2*8 -》16


• (8/2) ->4 //除法要写括号123



也可以包含单位

• 5px + 5px -> 10px


• 5px -2 ->3px


• 5px *2 ->10px


• 5px * 2px ->10px*px //这样就不对了哟


• （10px/2px） -> 5//除法单位取消


• 3+2*5px->13px123456



好吧，都是一些小学的数学题，很简单对吧

处理数字的函数

绝对值

• abs(10) -> 10;


• abs(10px) -> 10px;


• abs(-10px) -> 10px;123



四舍五入相关

• round(3.4)->3 //四舍五入


• round(3.6)->4


• ceil(3.2)->4 //向上取整


• ceil(3.6)->4


• floor(3.2)->3 //向下取整


• floor(3.9)->3


• percentage(600px/1000px) ->65% //百分之


• min(1,2,3) -> 1 //最小值


• max(2,3,4,5) -> 5 //最大值123456789



字符串相关

• //带引号和不带引号的字符串想加为带引号的字符串


• "a" + b ->"ab"


• a + "b" ->"ab"


• //字符串+数字


• "ab" + 1 ->"ab1"


• //字符串 - 和 / 字符串


• "a" - b ->"a-b"


• "a" / b ->"a/b"


• //注意字符串不能相乘123456789



字符串函数

大写：

• $word:"hello";


• to-upper-case($word) -> "HELLO"12



小写：

• $word:"Hello";


• to-lower-case($word) -> "hello"12



得到length：

• $word:"Hello";


• str-length($word) -> 512



得到字符串在字符串里的位置：

• $word:"Hello";


• str-index($word,"el") -> 212



字符串中插入字符串：

• $word:"Hello";


• str-insert($word,"aa",2) -> "Haaello"12



颜色相关

在sass里除了关键字、十六进制、rgb和rgba之外还有一种颜色是HSL
分别表示的是 色相 0-360（deg） 饱和度 0-100% 明度 0-100%
例如：

• body {


• background-color:hsl(0,100%,50%);


• }


• -》


• body {


• background-color: red;


• }1234567


• body {


• background-color:hsl(60,100%,50%);


• }


• -》


• body {


• background-color: yellow;


• }1234567



也可以有透明哟

• body {


• background-color:hsl(60,100%,50%，0.5);


• }


• -》


• body {


• background-color: rgba(255,255,0,0.5);


• }1234567



颜色函数

lighten函数和darken函数可以把颜色加深或减淡，即调整明度，第一个参数为颜色，第二个参数为百分比，例如：

• $color:#ff0000;


• $light-color:lighten($color,30%);


• $dark-color:darken($color,30%);


• .a{


• color:$color;


• background:$light-color;


• border-color:$dark-color;


• }12345678



—》

• .a {


• color: #ff0000;


• background: #ff9999;


• border-color: #660000;


• }12345



saturate和desaturate函数可以调整颜色的纯度

• $color:hsl(0,50%,50%);


• $saturate-color:saturate($color,50%);


• $desaturate-color:desaturate($color,30%);


• .a{


• color:$color;


• background:$saturate-color;


• border-color:$desaturate-color;


• }12345678



–》

• .a {


• color: #bf4040;


• background: red;


• border-color: #996666;


• }12345



用transparentize来让颜色更透明
用opatify来让颜色更不透明

• $color:rgba(255,0,0,0.5);


• $opacify-color:opacify($color,0.3);


• $transparentize-color:transparentize($color,0.3);


• .a{


• color:$color;


• background:$opacify-color;


• border-color:$transparentize-color;


• }12345678



—》

• .a {


• color: rgba(255, 0, 0, 0.5);


• background: rgba(255, 0, 0, 0.8);


• border-color: rgba(255, 0, 0, 0.2);


• }12345



列表类型

在sass里，用空格或者逗号隔开的值就是列表类型
如：

• 1px solid red


• Courier,microsoft yahei12



列表函数

sass里的列表类似与数组

• 获取列表的长度


• length(5px 10x) 2


• 获取列表中的第几个元素


• nth(5px 10px,2) 10px


• 获取一个元素在一个列表里的下标


• index(1px solid red,solid) 2


• 给列表里加入新的元素


• append(5px 10px,5px) 5px 10px 5px


• 连接两个列表


• join(5px 10px,5px 0) 5px 10px 5px 012345678910



map类型

sass里的map类型类似与js里的object

• $map:(key1:value1,key2:value2,key3:value3);1



map 函数

• //定义一个map


• $color:(light:#ffffff,dark:#000000);


• //获取map 的length


• length($color) ->2


• //得到map里key对应的值


• map-get($color,dark) ->#000000


• 获取map里的所有键的列表


• map-keys($color) ->("light","dark") //列表类型


• 获取map里的所有值的列表


• map-values($color) -> ("#ffffff","#000000") //列表类型


• 判断map里是否含有这个key


• map-has-key($color,light) ->true


• 给map里添加键值对


• map-merge($color,(light-gray:#cccccc))


• ->(light:#ffffff,dark:#000000,light-gray:#cccccc)


• 移除map里的某个键值对


• map-remove($colors,light) ->(dark:#000000,light-gray:#cccccc)1234567891011121314151617



boolean类型

在sass里通过> < 比较得到的值就是布尔值 true 和false

• 5px>3px -> true


• 5px<2px -> false12



在sass里也可以有或 且 非
且：

• (5px > 3px) and (5px < 2px) -> false


• (5px > 3px) and (5px > 2px) -> true12



或：

• (5px > 3px) or (5px < 2px) -> true


• (5px < 3px) and (5px > 2px) -> false12



非：

• not(5px>3px) -> false1



interpolation

在sass里可以通过interpolation的方式来在变量名和属性名上拼接变量值，例如

• $name:"info";


• $attr:"border";


• .alert-#{$name}{


• #{$attr}-color:red;


• }12345



---->

• .alert-info {


• border-color: red;


• }123



7、分支结构、循环结构、函数

分支结构

在sass里，可以使用@if让我们根据一些条件来应用特定的样式
结构：

• @if 条件 {




• }123



如果条件为真的话，括号里的代码就会释放出来
例如：

• $use-refixes:true;


• .rounded{


• @if $use-refixes {


• -webkit-border-radius:5px;


• -moz-border-radius:5px;


• -ms-border-radius:5px;


• -o-border-radius:5px;


• }


• border-radius:5px;


• }12345678910



—>

• .rounded {


• -webkit-border-radius: 5px;


• -moz-border-radius: 5px;


• -ms-border-radius: 5px;


• -o-border-radius: 5px;


• border-radius: 5px;


• }1234567



如果是另外一种情况

• $use-refixes:false;1



—》

• .rounded {


• border-radius: 5px;


• }123



if else在sass里的写法是：

• body{


• @if $theme == dark {


• background:black;


• } @else if $theme == light {


• background:white;


• } @else {


• background:gray;


• }


• }123456789



for循环

在sass里的for循环是这样的

• @for $var form <开始值> through <结束值> {


• ...


• }123



还有一种是

• @for $var form <开始值> to <结束值> {


• ...


• }123



注意，开始值和结束值的关系可以是升序也可以是倒序，但是每次只能+1或者-1
这两种有什么区别呢？
区别就是 from 1 to 4 的话是执行三次，i的变化是 1 2 3
from 1 through 4 的话是执行四次，i的变化是 1 2 3 4
如：
from to

• $columns:4;


• @for $i from 1 to $columns{


• .col-#{$i}{


• width:100% / $columns * $i;


• }


• }123456



—》

• .col-1 {


• width: 25%;


• }


• .col-2 {


• width: 50%;


• }


• .col-3 {


• width: 75%;


• }123456789



from through

• $columns:4;


• @for $i from 1 through $columns{


• .col-#{$i}{


• width:100% / $columns * $i;


• }


• }123456



—>

• .col-1 {


• width: 25%;


• }


• .col-2 {


• width: 50%;


• }


• .col-3 {


• width: 75%;


• }


• .col-4 {


• width: 100%;


• }123456789101112



each 遍历list类型

在sass里可以利用each方法来遍历咱们的list类型的数据
list类型在js里类似于数组，那么each类似于for in遍历，结构如下：

• @each $item in $list{


• ...


• }123



例如：

• $colors:success error warning;


• $map:(success:green,warning:yellow,error:red);


• @each $color in $colors{


• .bg-#{$color}{


• background:map-get($map,$color);


• }


• }1234567



—>

• .bg-success {


• background: green;


• }


• .bg-error {


• background: red;


• }


• .bg-warning {


• background: yellow;


• }123456789



@while 循环

在sass里，拥有@while循环，比@for会更好用一些,@for循环只能从一个数到另一个数变化之间执行，每次变化都是1，while设置循环结构的话更为灵活；
结构：

• @while 条件{




• }123



eq：

• $i:6;


• @while $i>0{


• .item-#{$i}{


• width:$i*5px;


• }


• $i:$i - 2;


• }1234567



注意：$i - 2 需要用空格隔开哟
---------》

• .item-6 {


• width: 30px;


• }


• .item-4 {


• width: 20px;


• }


• .item-2 {


• width: 10px;


• }123456789



自定义函数

在sass里也可以定义函数，并且也可以有返回值
结构：

• @function 名称 (参数1，参数2){


• @return ...


• }123



例如，我们做一个返回map里key对应的值的函数：

• $colors:(light:#ffffff,dark:#000000,gray:#555555);


• @function color($key){


• @return map-get($colors,$key);


• }


• body{


• background:color(light);


• color:color(dark);


• border-color:color(gray);


• }123456789



—》

• body {


• background: #ffffff;


• color: #000000;


• border-color: #555555;


• }