Sass入门
2021-01-23 19:54:48 6 举报AI智能生成
前端CSS框架 Sass入门使用一图掌握！
作者其他创作
大纲/内容
优点
写出更优秀的CSS。
解决CSS编写过程中的痛点问题，比如精灵图合图、属性的浏览器前缀处理等。
有效组织样式、图片、字体等项目元素。
受众
重构的同学，写很多CSS，不知如何自动化。
希望在项目周期内更好地组织项目内容。
使用
将`scss文件`转化为`css文件`
sass main.scss main.css
语法
后缀名
`.sass`
对空格敏感。不使用大括号和分号，所以每个属性之间是通过换行来分隔。
`.scss`
是css语法的超集，可以使用大括号和分号。
一个项目中可以混合使用两种语法，但是一个文件中不能同时使用两种语法。
两种格式之间的转换
sass-convert main.scss main.sass
变量
通过`$`符号来声明变量
给文件名的前面加了下划线，意思是声明为局部文件
既定规则
没有文件后缀名时，Sass 会自动添加 .scss 或者 .sass 的后缀（具体要看已经存在哪个后缀的文件）
同一目录下，局部文件和非局部文件不能重名。
注释
单行注释
//我是单行注释
块级注释
/*
我是块级注释
哈哈
*/
我是块级注释
哈哈
*/
单行注释不会出现在自动生成的css文件中。
定义
Syntactically Awesome Stylesheets Sass
Hampton Catlin开发
简化 CSS 工作流程的方式，更容易维护和开发 CSS 内容
世界上最成熟、稳定和强大的专业级 CSS 扩展语言。
s专注的是怎样创建优雅的样式表，而不是内容
Sass、Compass与CSS
Less/Sass是语法
Compass是框架
CSS是目标
安装
安装Ruby（windows环境）
安装时，记得勾选“环境变量”
在命令行中输入`ruby -v`，查看ruby的的版本
安装Sass
切换清华大学镜像
查看当前镜像源
gem sources -l
安装Sass
gem install sass
查看sass版本
sass -v
升级sass版本
gem update sass
运行帮助命令行
sass -h
`gem install sass`安装Sass
Compass
是什么
开源的CSS书写框架。
使用
安装
gem isntall compass
查看版本
compass -v
创建工程目录
cd workspace
compass create CompassDemo
通过 copass watch 监听sass文件的变化
cd CompassDemo
compass watch
0 条评论
下一页
为你推荐
查看更多
