LESS和SASS入门

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套用