Sass基础(一)
一、Sass语法规范
1、Sass老版本:通过tab键严格控制缩进;不带有任何分号和大括号;以“.sass”为扩展名。
2、Sass新语法格式(Scss):外形和css无差,以“.scss”为扩展名。
二、Sass编译
1、命令编译
在命令终端输入sass指令,是最直接最简单的编译方式。
单文件编译指令: sass <要编译的sass文件路径>/style.scss : <要输出的css文件路径>/style.css
多文件编译: sass sass/:css/ (将项目中sass文件夹下的所有文件进行编译,输出到css文件夹下)
缺点:只能一次性编译,每次个性保存“.scss”文件就得重新执行一次命令
解决方法: 开启“watch”功能,指令如下:
sass --watch <要编译的sass文件路径>/style.scss : <要输出的css文件路径>/style.css
2、GUI工具编译
推荐:Koala CodeKit
3、自动化编译
grunt gulp
三、Sass不同样式风格的输出方法
1、嵌套输出方式 -- nested
指令: sass --watch test.scss:test.css --style nested
Example:
2、展开输出式 -- expanded
指令: sass --watch test.scss:test.css --style expanded
Example:
3、紧凑输出式 -- compact
指令: sass --watch test.scss:test.css --style compact
Example:
4、压缩输出式 -- compressed
指令: sass --watch test.scss:test.css --style compressed
Example:
四、Sass变量
1、Sass变量的声明
声明Sass变量,一共有三个部分: a) 声明变量的符号: $ b)变量名称 c)赋予变量的值
2、普通变量和默认变量
3、变量的调用
4、全局变量和局部变量
5、变量声明的条件(什么时候声明变量)
a) 该值至少出现了两次
b) 该值至少可能会被更新一次
c) 该值所有的表现都与变量有关(非巧合)
最新文章
- XML 特殊字符
- TCP通信丢包原因总结
- Laravel之Service Container服务容器
- Fast RCNN 训练自己数据集 (1编译配置)
- 在oracle中创建空间索引
- mysql定时计划任务,ON COMPLETION [NOT] PRESERVE 当单次计划任务执行完毕后或当重复性的计划任务执行到了ENDS阶段。而声明PRESERVE的作用是使事件在执行完毕后不会被Drop掉
- Ubuntu环境变量——添加与删除
- spoj 1812 LCS2(SAM+DP)
- 流行的Python项目汇总
- 基于hadoop的图书推荐
- python random 模块的用法
- java基础(六)-----String性质深入解析
- php代理
- PHP防止网页快速刷新+代理ip访问
- jQuery中的函数汇总1
- MYSQL优化9大法!
- 帝国cms调用缩略图和具体文章的方法
- Apache自带性能测试工具ab的使用
- L: Long Long Ago---二分
- nyoj164——卡特兰数(待填坑)
热门文章
- Hyperledger Fabric java chaincode 编译部署(1.4V)
- 解读人:林山云,Proteomic Identification of Protein Glutathionylation in Cardiomyocytes(心肌细胞蛋白质谷胱甘肽修饰的蛋白质组鉴定)
- luogu1556 幸福的路
- Django forum
- Hibernate常见报错
- rent bike问题(二分+贪心)
- lintcode - 统计比给定整数小的数的个数(两种方法)
- lintcode - 被围绕的区域
- Java换行符
- Go语言基础之5--数组(array)和切片(slince)