没有IE9+、Chrome、Firefox等现代化浏览器,我都不好意思给你看!
一线城市的陕西人,回西安吧,这里需要你们!

前端css预编译语言

[前端开发] 人气:2423 2017-02-20 11:11:11 评论:-
赞:5
目前前端的预编译语言

前端css预编译语言


less和sass是目前最为流行的两种预编译,有助于我们更好的维护样式文件和构建清晰的样式结构。

less预编译语言


less 中文官网:http://less.bootcss.com/

less 教程:http://www.bootcss.com/p/lesscss/

Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。

Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。

重点介绍下我在工作中长使用的less


变量

变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

请注意 LESS 中的变量为完全的 ‘常量’ ,所以只能定义一次.

有助于项目公用一些颜色,字体大小,边距等,更有利于主题的制作。

less

@color-theme:#e71e0f;
@color-font:#333;
#header{
    color:@color-theme;

}
p{
    color:@color-font;
}

编译后的css

#header {
  color: #e71e0f;
}
p {
  color: #333;
}

混合

变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

less定义函数

//圆角
.border-radius(@radius:5px){
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
//阴影
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}
button{
    .border-radius;
    .box-shadow(2px, 5px);
}
a.btn{
    .border-radius(@radius:10px);    
    .box-shadow(2px, 5px,4px,#666);
}

编译后css

button {

  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  box-shadow: 2px 5px 1px #000;
  -moz-box-shadow: 2px 5px 1px #000;
  -webkit-box-shadow: 2px 5px 1px #000;
}
a.btn {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  box-shadow: 2px 5px 4px #666;
  -moz-box-shadow: 2px 5px 4px #666;
  -webkit-box-shadow: 2px 5px 4px #666;
}


嵌套规则

我们可以在一个选择器中嵌套另一个选择器来实现继承,这样很大程度减少了代码量,并且代码看起来更加的清晰。与html标签相同的嵌套,逻辑更加清晰有助于阅读和样式污染。

less

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

编译后的css

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

注意 & 符号的使用—如果你想写串联选择器,而不是写后代选择器,就可以用到&了. 这点对伪类尤其有用如::beforfer、::after、 :hover 和 :focus.

函数 & 运算


运算提供了加,减,乘,除操作;我们可以做属性值和颜色的运算,这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码,如果你愿意的话可以操作属性值。

// LESS

@the-border: 1px;
@base-color: #111;
@red:        #842210;
#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

编译后的css

#header {
  color: #333333;
  border-left: 1px;
  border-right: 2px;
}
#footer {
  color: #114411;
  border-color: #7d2717;
}

任何数字、颜色或者变量都可以参与运算.

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;
.logo{
    color: #888/4;
    background-color: @base+#111;
    height: 100% / 2 + @filler;
}

编译后css

.logo {
  color: #222222;
  background-color: #161616;
  height: 60%;
}


Color 函数

对颜色的操作处理,我最长使用的就是:减轻函数lighten()和 加深函数darken()

lighten(@color, 10%);     // return a color which is 10% *lighter* than @color
darken(@color, 10%);      // return a color which is 10% *darker* than @color
saturate(@color, 10%);    // return a color 10% *more* saturated than @color
desaturate(@color, 10%);  // return a color 10% *less* saturated than @color
fadein(@color, 10%);      // return a color 10% *less* transparent than @color
fadeout(@color, 10%);     // return a color 10% *more* transparent than @color
fade(@color, 50%);        // return @color with 50% transparency
spin(@color, 10);         // return a color with a 10 degree larger in hue than @color
spin(@color, -10);        // return a color with a 10 degree smaller hue than @color
mix(@color1, @color2);    // return a mix of @color1 and @color2


Math 函数

LESS提供了一组方便的数学函数,你可以使用它们处理一些数字类型的值:

round(1.67); // returns `2`

ceil(2.4);   // returns `3`

floor(2.6);  // returns `2`

如果你想将一个值转化为百分比,你可以使用percentage 函数:

percentage(0.5); // returns `50%`

命名空间


有时候,你可能为了更好组织CSS或者单纯是为了更好的封装,将一些变量或者混合模块打包起来, 你可以像下面这样在#bundle中定义一些属性集之后可以重复使用:````

#bundle {
  .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  }
  .tab { ... }
  .citation { ... }
}

你只需要在 #header a中像这样引入 .button:

#header a {
  color: orange;
  #bundle > .button;
}


作用域

LESS 中的作用域跟其他编程语言非常类似,首先会从本地查找变量或者混合模块,如果没找到的话会去父级作用域中查找,直到找到为止.

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}
#footer {
  color: @var; // red  
}

类似js变量有自己的作用域


Importing

你可以在main文件中通过下面的形势引入 .less 文件, .less 后缀可带可不带:

@import "lib.less";

@import "lib";

如果你想导入一个CSS文件而且不想LESS对它进行处理,只需要使用.css后缀就可以:

@import "lib.css";


less安装环境和配置


安装教程:

https://www.qianduan.net/sublime-text-2-less2css-plugin-introduction/


window环境下submit编辑器less配置

安装Sublime 插件


1.安装Less插件: ctrl+shift+p>install Package>输入less按Enter

安装后less文件就会高亮显示

2.安装Less2CSS插件:ctrl+shift+p>install Package>输入less2css按Enter

作用:当保存less文件的时候自动生成同名的css文件;当保存less文件的时候提示编译错误信息;批量编译项目目录下的所有less文件为css文件。

安装Node.js


下载node:https://nodejs.org/en/

安装node:


点击运行安装程序根据提示信息安装

安装完成之后命令行运行:

node -v

查看node版本,表示安装成功;

使用npm安装less


命令行运行:

npm install -g less

查看less版本信息

lessc -v

显示版本信息表示安装成功;

在submit中新建.less文件,保存后自动生成同名的.css文件;


SASS预编译语言


sass 中文官网:http://www.sasschina.com/

sass 中文教程:http://www.w3cplus.com/sassguide/

Sass 是成熟、稳定、强大的 CSS 扩展语言

LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。


变量

sass中可以定义变量,方便统一修改和维护。

sass

//sass style
//-----------------------------------
$fontStack:    Helvetica, sans-serif;
$primaryColor: #333;
body {
  font-family: $fontStack;
  color: $primaryColor;
}

编译后的css

//css style
//-----------------------------------
body {
  font-family: Helvetica, sans-serif;
  color: #333;
}


嵌套

sass可以进行选择器的嵌套,表示层级关系,看起来很优雅整齐。

//sass style
//-----------------------------------
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
//css style
//-----------------------------------
nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }
nav li {
  display: inline-block; }
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }

导入


sass中如导入其他sass文件,最后编译为一个css文件,优于纯css的@import

reset.scss

//sass style
//-----------------------------------
// _reset.scss
html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}
//sass style
//-----------------------------------
// base.scss 
@import 'reset';
body {
  font-size: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

最终合成的css

//css style
//-----------------------------------
html, body, ul, ol {
  margin: 0;
  padding: 0;
}
body {
  background-color: #efefef;
  font-size: 100% Helvetica, sans-serif;
}

mixin


sass中可用mixin定义一些代码片段,且可传参数,方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。

//sass style
//-----------------------------------
@mixin box-sizing ($sizing) {
    -webkit-box-sizing:$sizing;     
       -moz-box-sizing:$sizing;
            box-sizing:$sizing;
}
.box-border{
    border:1px solid #ccc;
    @include box-sizing(border-box);
}

编译后:

//css style
//-----------------------------------
.box-border {
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

扩展/继承


sass可通过@extend来实现代码组合声明,使代码更加优越简洁

//sass style
//-----------------------------------
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}


.success {
  @extend .message;
  border-color: green;
}
.error {
  @extend .message;
  border-color: red;
}
.warning {
  @extend .message;
  border-color: yellow;
}

编译后:

//css style
//-----------------------------------
.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}
.success {
  border-color: green;
}
.error {
  border-color: red;
}
.warning {
  border-color: yellow;
}


运算

sass可进行简单的加减乘除运算等

//sass style
//-----------------------------------
.container { width: 100%; }
article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}
aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}

编译后:

//css style
//-----------------------------------
.container {
  width: 100%;
}
article[role="main"] {
  float: left;
  width: 62.5%;
}
aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}

颜色:

sass中集成了大量的颜色函数,让变换颜色更加简单。

//sass style
//-----------------------------------
$linkColor: #08c;
a {
    text-decoration:none;
    color:$linkColor;
    &:hover{
      color:darken($linkColor,10%);
    }
}

编译后:

//css style
//-----------------------------------
a {
  text-decoration: none;
  color: #0088cc;
}
a:hover {
  color: #006699;
}

sass安装环境和配置


window环境下submit编辑器less配置

安装submit插件


1..安装Sass插件: ctrl+shift+p>install Package>输入sass按Enter

2.安装Sass Build: ctrl+shift+p>install Package>输入Sass Build按Enter

安装环境依赖ruby


ruby安装教程:http://www.w3cplus.com/sassguide/install.html

ruby官网下载:http://rubyinstaller.org/downloads

安装完成之后把ruby增加到系统环境变量中;

sass安装

gem install sass

如果安装失败尝试翻墙或是使用淘宝镜像

安装成功使用:

sass -v

查看版本

安装成功后再submit中.scss文件“ctrl+b”即可编译,生成同名的.css文件。


icon喜欢(5)

评论这篇文章

数据加载中...