LESS/SASS
1.LESS/SASS是完全是命令行知识，和CSS没什么关系。
2.学完CSS再学LESS/SASS，学完走再学跑。
CSS
index.html
link:src style.css
<h5>这是传说中的H5</h5>
style.css
h5{ color: red; }
mac 用open index.html 打开网页；
window 用start index.html 打开网页。
效果图
使用LESS
只需要命令行就行。
-
搜索文档
Google搜索：less css
LESS文档
-
安装less
需要先安装node.js（流程就一直下一步，不需要改任何参数）
安装完node.js后，就可以使用npm命令了
$ npm install -g less //安装less
$ which lessc //检查是否安装成功
删除style.css； 创建style.less
less的语法兼容css,直接在less里面写css就可以
less是在css基础上加一点语法。
touch style.less //替换css的
index.html引用还是css,需要命令行把LESS转成CSS
-
lessc name.less 用法（把less转换为css语法）
lessc style.less //把less转换为css格式
翻译成css语法
再添加一个H6
lessc style.less //再次把less转换为css格式
翻译后
-
储存为css文件
lessc style.less > style.css //把转化成css格式的代码，存储到style.css中
只写less,不写css,css文件是命令行生成的。
tips:
如果在mac系统，再次lessc style.css > style.css,会报错。
在Windows系统下，则不会出现报错提示。
mac系统下需要强制生成一下
-
优化重复转换写入
每次都手动 lessc style.css > style.css 会很麻烦，需要一个优化方案，使less写入时，和css一样。
监听一个文件的变化,只要文件发生改变就会触发
可以使用watch，也有其他方法可以实现，Google搜索
watch文档
npm install watch -g
系统自带watch命令，每隔一秒执行一次
watch -n 1 "lessc style.less > style.css" //一秒执行一次
mac系统下
使用SASS
只需要命令行就行
-
文档
Google搜索SCSS CSS
SASS文档
SASS中文文档
-
安装Ruby
Windows系统需要先安装Ruby。
windows下安装sass，以及常见错误和解决办法
-
安装sass
gem install sass
touch style.scss //新建文件
-
储存为css文件
sass style.scss:style.css //转化成css格式的代码，存储到style.css中
// 每次修改完成后，使用该命令更新一下css文件
SASS和LESS语法没区别
-
优化重复手动转换写入
sass --watch style.scss:style.css
语法
-
嵌套规则
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
被编译为：
#main p {
color: #00ff00;
width: 97%;
}
#main p .redbox {
background-color: #ff0000;
color: #000000;
}
-
变量
必须$开头
$red: #f00;
body{
h5{
color: $red; //可以重复引用变量
}
}
$widthL 5em;
#main{
width: $width;
}
-
mixins
//引用放在上面
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
} //省略前缀
color: #ff0000;
}
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
//使用@include large-text套用
网友评论