sass

学习目标

1 安装好ruby环境 sass是基于ruby开发 gem

2 学会安装sass gem install compass

3 学会使用sass编译成css

4 学会使用sass的一些简单语法

5 学会使用sass编译十二栅格

1/安装ruby

mac下面不需要安装ruby window下面安装ruby 需要下载 rubyinstaller 网站地址：https://rubyinstaller.org/

2 安装sass 理解 sass与compass的关系

compass 其实是基于 sass来开发的 就相当于 js 与 jquery的关系 这里我们可以把 sass 理解为js compass 理解为 jquery 安装命令 gem install compass 在这里 我们可以查看sass是否安装成功 sass -v

3 编译sass 的简单命令

1/ sass demo1.scss demo1.css 只编译一次 2/ sass --watch demo1.scss:demo1.css 监视sass文件的命令 3/ 监视文件夹：sass --watch <sass folder>:<css folder> 示例：sass --watch sass:stylesheets 4/ 全部编译： compass compile 5/ 监视文件夹： compass watch 每改一个编译一个 6/ 强制全部编译： compass watch --force

4 理解 config.rb

require "compass/import-once/activate" 关联示例：environment = :development开发环境 || :production 服务器环境 http_path = "/" css_dir = "stylesheets" sass_dir = "sass" images_dir = "images" javascripts_dir = "javascripts" output_style = :expanded 设置压缩风格 示例：output_style = (environment == :development) ? :expanded : :compressed 这句话的意思是 看是在开发环境 还是在服务器环境

5 构建项目以及语法：

1 构建compass工程 compass create hello(自定义) 2 变量 2.1局部变量 body{ 语法： $color ：red ; } 2.2 全局变量 body{ 语法： $color ：red !global ; } 2.3 多值变量 2.3.1 第一种类型：$paddings: 5px 10px 5px 10px; 如果只取第一个 padding-left:nth($paddings,1); 2.3.2 第二种类型： map类型 $maps: (color : red ,borderColor:blue); background-color:map-get($maps,color); 注意： 这里的color为key值 类似于json 2.4 定义id 或者class 示例： $className : main .#($className){ width : 50px; hegiht: 50px; }

6 部分文件： 以下划线开头命名 示例： _part.scss @import “part” 或者 @import “_part.scss”

7 选择器嵌套：

body { background-color :red; header{ background:green; } }

8 属性嵌套：

footer{ background:{ color: red; size:100% 50%; } }

9 引用父类选择器： a{ color:red; &:hover{ color:blue; } }

10 跳出嵌套： @at-root .container{ width:1104px; } 注意： 在 @media 中是无法跳出的 示例： @media screen and (max-width:600px){ @at-root .container{ background: red; } } 那如何跳出： @media screen and （max-width:600px）{ @at-root (without: media rule){ .container{ background:red; } } }

11 / 继承

单个继承： .alert{ background-color : red; } .alert-info{ @extend .alert; color: red; } 多个继承: .alert{ background-color : red; } .small{ font-size:16ppx; } .alert-info{ @extend .alert, .small; color: red; }

12 sass 进阶 1 数据类型： Number string list map color boolean null

//数字类型 $n1: 1.2; $n2: 12; $n3:14px; p{ font-size:$n3; } //字符串类型 $s1:container; $s2:'container'; $s3:"container"; .#($s3){ font-size:$n3; } //布尔 不常用 $bt:ture; $bf:false; // null 不常用 body{ @if $null ==null{ color:red; } } //颜色类型 $c1: blue; $c2:#fff; $c3:raba(255,0,0,0.5);

//运算符 < > == != + -

13 Mixin 定义片段

简单示例： @mixin cont ($color:red,fontSize:14px){ color:$color; font-size:$fontSize } body{ @include cont($fontSize:18px); } 示例2： @mixin box-shadow($shadow...){ -moz-box-shadow:$shadow; } .shadows{ @include box-shadow(0px 4px 4px #222,2px 6px 10px #622) } 示例3： 针对移动端 iphone 来调整 @mixin style-for-iphone{ @media only screen and (min-device-width:320px) and (max-device-width:640px){ @content; } } @include style-for-iphone{ font-size:10px; }

14 内置函数：

rgb() rgba() darken(color, 0.5) 变深 lighten(color,0.5) 变浅

15 自定义函数：

@function double($width){ @return $width*2; }

sass 高级

if 条件判断 注意不支持if…else…

.test8 { //if…if… @if 1+1 == 2 { width: 20px; } @if 5 < 3 { width: 100px; } } .test81 { //if…else if… @if 1+1 != 2 { width: 20px; } @else if 5 > 3 { width: 100px; } } .test82 { //if…else if…else… @if 1+1 != 2 { width: 20px; } @else if 5 < 3 { width: 100px; } @else { width: 10px; } }

for 循环 //第一种格式 @for $var from through ,注意范围包括和的值 @for KaTeX parse error: Expected '}', got '#' at position 31: …h 3 { .gray#̲{i3} { color: #333$i; } }

//第二种格式 @for $var from to ,注意范围从开始运行，但不包括的值 @for KaTeX parse error: Expected '}', got '#' at position 27: … 4 { .gray2#̲{i3} { color: #333$i; } }

each 循环语句 @each $var in

$name:“lili”,“yaya”,“sansa”; //注意数组list的写法 @each $i in KaTeX parse error: Expected '}', got '#' at position 18: …me { test9.#̲{i} { width: 10px; } }

$name2:(name21:“lili”,name22:“yaya”,name23:“sansa”); //注意对象map的写法 @each $i in KaTeX parse error: Expected '}', got '#' at position 19: …e2 { test9.#̲{i} { width: 10px; } }

$name3:(name31:1,name32:2,name33:3); //注意对象map的写法 @each $key,$value in KaTeX parse error: Expected '}', got '#' at position 19: …e3 { test9.#̲{key} { width: 10px*$value; } }