CSS预处理脚本
(以下所有操作基于mac osx)
sass
1.sass的安装
- sass的安装依赖ruby环境,所以在安装sass之前需要先安装ruby环境,如果系统没有安装ruby环境的朋友先自行google安装ruby环境,安装好ruby环境以后执行以下命令安装sass
sudo gem install sass
- 执行以下命令,如果正确输出版本号则表明sass已经正确安装
sass -v
gem update sass
gem uninstall sass
- 命令编译
sass test.scss test.css
- 实时监听文件的改变并编译
sass --watch test.scss test.css
- 使用GUI图形化界面软件编辑
在这里给他家推荐一款作者经常使用的工具Koala,它既可以编辑sass文件也可以编辑后面要讲到的less文件 - 自动化编译
如果你的项目使用了gulp或者grunt等自动化工具,可以进行相关配置,自动化编译,不懂配置小伙伴可以去阅读grunt和gulp的相关文章,所有插件的配置方式都一样
- 嵌套式输出
- 嵌套输出带 --style expanded(带css格式的输出,样式换行)
- 嵌套输出带 --style compact(紧凑的css格式输出)
- 嵌套输出带 --style compressed(压缩的css格式输出)
- 注意sass变量的作用域
- sass通过&符号直接访问父元素
- 属性嵌套
.box{
border:{
top:1px solid #ddd;
left:2px solid #ddd;
}
}
编译成css就是
.box{
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
}
7.混合宏
- 定义一个混合宏
@mixin name{
//样式
}
- 调用混合宏
a{
@include name;
}
- 带参数的混合宏
@mixin name(arg:defaultValue){
//样式
}
8.拓展和继承
- 继承
.parent{
//样式
}
.test{
@extend .parent
}
- 占位符
%test{
//样式
}
.h1{
@extend %test;
}
- 插值
- 加
- 减
- 乘
- 除
- 颜色运算
- 字符运算
- 变量运算
11.@for $i frome start through end / @for $i from start to end
12.@while 条件{}
13.@each $item in $list
14.sass函数
- 字符串函数
unquote()
quote()
to-upper-case()
to-lower-case()
- 数字函数
percentage()
round()
ceil()
floor()
abs()
min()
max()
random()
- 列表函数
length()
nth()
join()
append()
zip()
index()
- Introspection 函数
type-of()
unit()
unitless()
comparable()
- map函数
map()
map-get()
map-has-key()
map-keys()
map-values()
map-merge()
map-remove()
keywords()
- 颜色函数
rgb()
rgba()
red()
green()
blue()
mix()
lighten()
darken()
saturate()
desaturate()
adjust-hue()
grayscale()
alpha()
opacity()
opacfy()
fade-in()
transparentize()
fade-out()
【CSS预处理脚本】15.@规则
- @import
- @media
- @extend
- @at-root
- @debug
- @warn
- @error
推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 「按键精灵安卓版」关于全分辨率脚本的一些理解(非游戏app)
- Linux|109 个实用 shell 脚本
- 3.css浮动
- 5.|5. Python 入门- 课程 5 脚本
- linux作业9
- css|我用css精灵图拼接了自己的英文名字,不会还有人不知道精灵图技术吧()
- css|css三角的做法及其案例
- css|css中元素的显示与隐藏
- CSS兼容性笔记