sass使用
来源:互联网 发布:甘地 印度独立 知乎 编辑:程序博客网 时间:2024/06/08 05:23
sass是啥
CSS 不是一个编程语言,可以用它来开发网页样式,但是没有办法用它进行编程。SASS 的出现,让 CSS 实现了通过代码编程来实现的方式。 SASS 是一种 CSS 开发工具,提供了许多便利的写法,让CSS 的处理实现了可编程处理。 SASS 扩展了 CSS3,增加了规则、变量、混入、选择器、继承等等特性,可以生成风格良好的 CSS 样式表文件,易于组织和维护。
后缀
sass 有两种后缀名文件:一种后缀名为 sass,不使用大括号和分号;另一种就是我们这 里使用的 scss 文件,这种和我们平时写的 css 文件格式差不多,使用大括号和分号。在此也建议使用后缀名为 scss 的文件,以避免 sass 后缀名的严格格式要求报错。
安装
1.ruby安装,用命令行gem install sass
编译
1.先进入包含.scss文件的文件夹2.sass --watch example.scss:example.css --style 参数1参数如下:nested 嵌套compact 紧凑 每个选择器代码在一行expanded 扩展(完全格式化标准)compressed 压缩一行3。多文件编译sass --watch .:css --style nested
中文注释问题
@charset "utf-8";
Sass-变量定义
变量
必须是$符号开头,后面紧跟变量名,变量名称和变量值之间要使用冒号:进行分隔(参考 CSS 属性和值的设定语法) ,如果值后面加上[!default]就表示默认值。引用变量的值,直接使用变量名称,即可引用定义的变量的值
$w:200px;$h:200px;$color:red;.box{ width: $w; height: $h; background: $color - 10;}
特殊变量
一般情况下,我们定义的变量都是属性值,可以直接使用,但是如果变量作为属性或者其他的特殊情况下,必须使用#{$variable}的形式进行调用。
$b:border;$n:none;.box1{ #{$b}:1px solid #f99; #{$b}-color:red; display: $n;}
Sass-数组/map
map 就是列表项目中带名称的列表定义数组: $map:(key1:value1, key2:value2, key3:value3)
length($map):获取 map 中的元素对个数map-keys($map):获取指定$map 中所有的 keymap-values($map):获取指定$map 中所有的 valuemap-values($map):获取指定$map 中所有的 valuemap-merge($map1, $map2):将$map1 和$map2 合并在一起map-remove($map, key):将指定名称的 key 从$map 中移除
Sass-嵌套
1.选择器嵌套,在嵌套的过程中,如果需要用到父元素,在 SASS 中通过&符号引用父属性2.嵌套属性——不常用
选择器
.box2{ color:red; p{ width: 10px; height: 200px; li{ color:red; } }}
属性
.box3{ width: 200px; height: 200px; border:{ width: 20px; style:dashed; color:blue; top:{ style:double; } bottom:{ color: red; } }}
Sass-mixin函数
sass 中可以通过@mixin 声明混合,可以传递参数,参数名称以$开始,多个参数之间使用逗号分隔,@mixin 的混合代码块由@include 来调用。
@mixin top($co:red,$wb:50px){ border-color: transparent transparent $co transparent; border-width: $wb; border-style:solid;}.box4{ width: 0; height: 0; @include top();}
Sass-语句
if语句
@if 指令是 SASS 中的一个控制指令,用于在表达式满足条件(true)的时候输出指定的样式,在不满足条件(false)或者表达式为 null 的情况下输出其他的样式,里面不能定$n:200px;
.box5{
@if
background: #99f;} @else { background: #f99;}width:$n;height: $m;background: $s;
}
for语句
@for $i from 1 through 5 { .box_#{$i}{ width: 100px; } }@for $j from 1 to 3{ .hezi_#{$j}{ height: 100px; }}
while语句
$a:1;@while $a < 6 { .hezi_#{$a}{ border-width: 100px; } $a:$a +1;}
继承
在 SASS 中,通过继承/扩展来减少重复代码,可以让一个选择器去继承另一个选择中所有的样式。
.box5{ width: 100px; height: 200px; background: #f99;}.box6{ @extend .box5;}
Sass-导入
CSS 本身包含一个指令@import,但是 CSS 中的@import 每次执行都会发送一次新的请求都会消耗一定的资源Partials 这样的文件, 命名规范是以下划线开头的, 这样的 scss 文件不会被编译成 css文件。Partials 是用来定义公共样式或者组件的样式的, 专门用于被其他的 scss 文件 import进行使用的在 SCSS 文件中引入指令@import 在引入Partials 文件时,不需要添加下划线和扩展名。
自定义函数
函数的功能主要是数据的运算,SASS 中可以将一些值交给函数进行处理,具体的处理方式
@function add($n){ @return $n*10;}.box8{ width: add(50); height: add(25); background: #f99 + add(5);}
颜色函数
lighten(#cc3, 10%) // #d6d65c darken(#cc3, 10%) // #a3a329 grayscale(#cc3) // #808080 complement(#cc3) // #33c
background: lighten(#cc3, 10%) ;
0 0
- 使用Sass
- sass使用
- 使用gulp实时编译sass/sass
- 【SASS-01】Sass安装与使用
- bootstrap-sass的使用
- sass / compass 使用笔记
- sass 安装使用杂记
- bootstrap-sass安装使用
- sass使用记录
- html 中使用 sass
- 使用sass创建工程
- Sass的简单使用
- sass 使用简介
- 使用gulp编译sass
- Sass变量的使用
- Sass嵌套的使用
- Sass使用for循环
- sass &的使用
- Tinychatserver- 一个简易的命令行群聊程序
- Java复习之对象一对多关系与对象多对一关系
- 数据离散化
- Android 常用权限解读
- poj-3259-Wormholes
- sass使用
- Android Handler消息机制源码分析——第一部分:Looper与MessageQueue
- Cogs 2221. [SDOI2016 Round1] 数字配对(二分图)
- 框架类总结
- 168. Excel Sheet Column Title
- 双目标定之Matlab 2015工具箱标定步骤
- butterknife:8.0.1的使用
- iOS通过ASIHttpRequest接收php端发送的Json数据
- Google java编程规范