css预处理语言

2017-12-26

css预处理语言简介

css预处理语言允许我们以更简单的方式编写样式，通过编译生成浏览器能够使用的css文件。

Sass 诞生于 2007 年，Ruby 编写，其语法功能都十分全面，可以说它完全把 CSS 变成了一门编程语言。另外在国内外都很受欢迎，并且它的项目团队很是强大，是一款十分优秀的预处理语言。
Stylus 诞生于 2010 年，来自 Node.js 社区，语法功能也和 Sass 不相伯仲，是一门十分独特的创新型语言。
Less 诞生于 2009 年，受Sass的影响创建的一个开源项目。它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充（引用于官网）。

1. Less

安装
yarn add less
/ or install globally /
yarn global add less
// Dead Simple LESS CSS Watch Compiler，实时监控less文件变化，更新到css
yarn add less-watch-compiler

使用
lessc styles.less // 并不会生成任何css文件
lessc styles.less styles.css //生成一个styles.css文件
新建一个style.less文件

@background-color: #f4f4f4;
body {
  background-color: @background-color;
}

生成的css文件长这样：

body {
  background-color: #f4f4f4;
}

//有变量，可以进行数学运算
@line-height: 1em+1em;

//可以嵌套
@secondary-color: #20B2AA;
ul {
  background-color: @background-color;
  li {
    color: @secondary-color;
    a {
      line-height: @line-height;
    }
  }
}

// 有继承
.btn {
    padding: 10px 15px;
    border: 0;
    .border-radius(10px);
}

.primary-btn:extend(.btn){
    background: @primary-color;
    .text-color(@primary-color);
}


// 有函数（mixin），有没有入参都行
.bordered{
    border-top: dotted 1px #000;
    border-bottom: solid2px #000;
}

.border-radius(@radius) {
    border-radius: @radius;
}

//还有if statement
.text-color(@a) when (lightness(@a) > = 50% ){
    color: black;
}

.text-color(@a) when (lightness(@a) < 50% ){
    color: white;
}

filepath
比如经常把一些文件挪到其他位置了，这下在css中引用的位置全部都要换，

@images: "images/"
@homepage-images: "images/homepage/"

img {
  background: url("@{images}fruit.png");
}

import功能
在main.less文件中

@import header.less
@import menu.less
直接用

更多的使用直接去Less查找就好了

less搭配webpack(webpack-dev-server使用)使用方式

deadsimple-less-watch-compiler — watch less
webpack-dev-server – watch js file changes
webpack-less-loader

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'less-loader'
        ]
      }
    ]
  }
}

在index.js中:

import css from ‘styles.less’;

找了好久没有找到关于less-loader hot reload的设置，只好在package.json中设置

“dev”: “less-watch-compiler”,
“start”:”webpack-dev-server –progress –hot –inline –config webpack.config.js && yarn dev”

把两个command chain起来就是了

2.Stylus

安装
yarn add stylus
yarn add stylus-loader

使用
stylus -w style.styl -o style.css //w表示watch

line-height = 10px
body
    margin: 0
    padding: 0
    h1
     color: #5e5e5e
     line-height: line-height

生成的css文件长这样

body {
  margin: 0;
  padding: 0;
}
body h1 {
  color: #5e5e5e;
  line-height: 10px;
}

// mixin也有
border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n

form input[type=button]
  border-radius(5px)

官网

当然日常开发中不可能一直手敲 stylus xxx xxx或者 lessc xxx xxx，因为有webpack-loader。

3. Sass

Sass需要安装Ruby。

SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。

@mixin rounded($amount) {
  -moz-border-radius: $amount;
  -webkit-border-radius: $amount;
  border-radius: $amount;
}

Sass本身不带花括号，加上花括号和分号就成了SCSS了.