CSS预处理

二十有五
292 阅读7分钟

LESS 预处理

Less介绍

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充，可以运行在 Node（服务器）、浏览器和 Rhino 平台上。

Sass:less使用 .less 作为文件后缀。通过第三方工具，可以一键或者实时编译成对应的css文件。

使用Less

Less可以用到服务器端，也可以用作浏览器端。我们今天只研究如何在浏览器端使用。有两种办法使用Less：

在HTML中直接使用 .less文件

  • 书写扩展名为.less的less文件，比如：
@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
  box-shadow: @style @c;
  -webkit-box-shadow: @style @c;
  -moz-box-shadow: @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

2. 在html中引入less文件.注意：ref属性必须是 stylesheet/less href的值就是指的less文件。

<link rel="stylesheet/less" type="text/css" href="styles.less">

3. 引入下面的js文件，负责把 less文件编译成css文件。(less.js需要预先下载完成。)

<script src="less.js" type="text/javascript"></script>

也可以使用cdn加速

  • <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.min.js"></script>
  • 注意： 一定要先引入less文件，再引入script标签。
  • 缺点：由于less的编译是在前台通过css实时编译的，所以会影响前端页面的执行效率，在实际的生产环境中一般不建议使用，而是使用下面的先编程成css文件，然后在页面中仍然引用css文件。

提前编译成 .css文件，然后再使用 css文件

传统做法一般是在服务器端下载less，然后使用命令行手动编译less文件为css文件。编译less文件需要node.js的支持。编译起来比较麻烦。,目前一些第三方GUI工具可以自动的帮助我们完成从less到css的编译工作。

  • koala(Win/Mac/Linux)国人开发的LESSCSS/SASS编译工具。下载地址：koala-app.com/index-zh.ht…,
  • Codekit(Mac)一款自动编译Less/Sass/Stylus/CoffeeScript/Jade/Haml的工具，含语法检查、图片优化、自动刷新等附加功能。下载地址 incident57.com/codekit/
  • WinLess(Win)一款LESS编译软件。下载地址winless.org/
  • SimpleLess(Win/Mac/Linux)一款LESS编译软件。下载地址wearekiss.com/simpless

我们可以使用koala作为我们的编译工具。

  • 安装koala
  • 把当前的工程目录或者less文件所在的目录添加到coala中。coala就会自动编译less文件成为css文件。完全后台自动运行不需要人工干预。
  • 另外也可以使用Hbuilder自带的编译功能，也可以把less编译成css，但是每次都需要手动去完成，相对比较麻烦。

Less语法

  • LESS 做为 CSS 的一种形式的扩展，它并没有阉割 CSS 的功能，而是在现有的 CSS 语法上，添加了很多额外的功能，所以学习 LESS 是一件轻而易举的事情。
  • 可以把Less看出css的一种超集。

变量

  • LESS 允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单。
@border-color : #b5bcc7; /* 定义一个变量，变量名必须以@开头*/
.div{
  border : 1px solid @border-color;
}
css内容：
.mythemes{
  border: 1px solid #b5bcc7;
}

说明

如果对同一个变量定义两次的话，在当前作用域中最后一次定义的将被使用。这与CSS的机制类似，最后一次定义的值会成为这个属性的值。变量是“按需加载”（lazyloaded）的，因此不必强制在使用之前声明。

混入

混合可以将一个定义好的classA轻松的引入到另一个classB中，从而简单实现classB继承classA中的所有属性。我们还可以带参数地调用，就像使用函数一样。

.rounded-corners (@radius: 5px) {/* 使用我们的时候，如果有传入值就使用传入的值，没有传入值就使用默认值5px*/
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}
#div1 {
  .rounded-corners; /* 使用默认值*/
}
#divide {
  .rounded-corners(10px); /*使用10px*/
}

css源码：

#div1 {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#div2 {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

嵌套

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

#header {
h1 {
    font-size: 60px;
    font-weight: bold;
}
p {
    font-size: 40px;
        a {
            text-decoration: none;
                &:hover {
                    border: 1px dashed pink;
            }
        }
    }
}

css源码：

#header h1 {
    font-size: 60px;
    font-weight: bold;
}
#header p {
    font-size: 40px;
}
#header p a {
    text-decoration: none;
}
#header p a:hover {
    border: 1px dashed pink;
}

说明

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

运算

运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。运算应该被包裹在括号中

@base: 5%;
@filler: (@base * 2);
@other: (@base + @filler);
color: (#888 / 4);
background-color: (@base-color + #111);
height: (100% / 2 + @filler);

说明：

  • 任何数字、颜色或者变量都可以参与运算，运算应该被包裹在括号中。

函数

LESS 提供了多种函数用于控制颜色变化、处理字符串、算术运算等等。这些函数在函数手册中有详细介绍。函数的用法非常简单，下面这个例子将介绍如何将 0.5 转换为 50%，将颜色饱和度增加 5%,以及颜色亮度降低 25% 色相值增加 8 等用法：

@base: #f04615;
@width: 0.5;
.class {
    width: percentage(0.5); // returns 50%
    color: saturate(@base, 5%);
    background-color: spin(lighten(@base, 25%), 8);
}

注释

注释

CSS 的注释格式在LESS 中依然有效：
/*Hello, I'm a CSS-style comment */
.class{ color: black }

LESS 同样也支持双斜线的注释，但是编译成CSS 的时候自动过滤掉：
//Hi, I'm a silent comment, I won't show up in your CSS
.class{ color: white }

字符串插入

@v:"host";
#div2 {
    height: 200px;
    width: 200px;
    .rounded-corners(50px);
    background: url("http://os.blog.163.com/common/ava.s?@{v}=hzungang@126&b=1&r=-1";;);
}

选择器插入

如果需要在选择器中使用LESS 变量，只需通过使用和字符串插件一样的@{selector} 即可，例如：

@name: blocked;
.@{name} {
    color: black;
}

输出：

.blocked {
    color: black;
}

LESS的优缺点

优点

  • 结构清晰，便于扩展。
  • 方便屏蔽浏览器私有语法差异
  • 轻松实现多重继承
  • 完全兼容CSS代码，可以方便应用到老项目中

缺点

  • 需要编译
  • 更新不够活跃

sass是一种css的开发工具，提供便利的写法，节省设计者开发时间。

SASS安装和使用

安装

/*
sass是ruby语言写的，需安装ruby http://www.ruby-lang.org/zh_cn/downloads/

安装完成之后安装sass

gem install sass

使用

/*
SASS文件就是普通的文本文件，里面可以直接使用css语法，文件后缀名为.scss

将.scss文件转化为.css 文件
sass test.scss test.css

SASS四种编译风格

nested:嵌套缩进的css代码，他是默认值
expanded:没有缩进，扩展的css代码
compact:简洁格式的css代码
compressed:压缩后的css代码

生产环境中一般使用最后一个

sass --style compressed test.scss test.css

可以让sass监听某个文件或者目录，一旦源文件有变动，就会自动生成编译后的版本

sass --watch test.scss:test.css

在监听期间可能报编码错误,解决方法如下

在.scss文件顶部添加：@charset "utf-8"; 并且整个文件路径不能出现中文字符

基本用法

变量

sass允许使用变量，所以变量以$开头
$x:blue;

div{font-size: 28px;background-color: $x;width: 100px;height: 100px;}

$side:left;如果变量需要镶嵌在字符串之中，就必须写在#{}之中

div{font-size: 28px;width: 100px;height: 100px;border-#{$side}:1px solid red;}

计算功能

sass代码中使用算式
$var:1;

div{margin:(45px/2);top:50px+100px;left:$var*50%;width: 100px;height: 100px;background-color: red;position: absolute;}

嵌套

sass允许选择器嵌套

标签嵌套的两种写法

写法一

div{
h1{width: 100px;height: 100px;background-color: red;}
}
写法二
div h1{width: 100px;height: 100px;background-color: red;}

属性也可以嵌套

div{
width: 100px;height: 100px;
background:{color:red};//backround后面必须带冒号
}

在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：

div{
width: 100px;height: 100px;
background:{color:red};
&:hover{background-color: blue};
}

注释

SASS共有两种注释风格。

标准的CSS注释 /* comment */ ，会保留到编译后的文件。

单行注释 // comment，只保留在SASS源文件中，编译后被省略。

在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

/*我是标准注释*/

//我是单行注释，编译后会被删略

/*! 我是重要注释，会被保留*/

代码的重用

继承

sass允许一个选择器继承另外一个选择器

div{width: 100px;height: 100px;background-color: red}

h1{@extend div}

Mixin

Mixin有点像c语言的宏，是可重用的代码块

使用@mixin命令，定义一个代码块

@mixin left{width: 100px;height: 100px;background-color: red;}

使用@include命令，调用这个mixin

div{@include left;}

mixin，可以指定参数和缺省值

@mixin left($value:100px){width: $value;height: $value;background-color: red;}
div{@include left;}

使用的时候，根据需要加入参数

@mixin left($value:100px){width: $value;height: $value;background-color: red;}
div{@include left(20px);}

实例:

@mixin round($vert,$color:red){border-#{$vert}:1px solid $color;}
div{width: 100px;height: 100px;@include round(left,red);}

颜色函数

sass内置了一些颜色函数

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

div{width: 100px;height: 100px;background-color: lighten(#cc3,10%)}

插入文件

@import命令插入外部文件

@import './test2.css' @import './test2.scss'

高级用法

条件语句

@if可以用来判断

div { @if 1+1==2{width: 100px;height: 100px;background-color: red;}}

@else命令

div {
@if 1+1==3{width: 100px;height: 100px;background-color: red;}
@else {width: 50px;height: 50px;background-color: blue}
}

sass支持循环

<div class="border-1"></div>
<div class="border-2"></div>
<div class="border-3"></div>
<div class="border-4"></div>
<div class="border-5"></div>
<div class="border-6"></div>
<div class="border-7"></div>
<div class="border-8"></div>
<div class="border-9"></div>

.scss

@for $i from 1 to 10{
.border-#{$i}{
border: #{$i}px solid blue;
}
}

@while循环

$i: 6;
@while $i > 0 {
    .item-#{$i} { width: 2em * $i; height: $i+5px;background-color: red;}
    $i: $i - 2;
}


@each 作用于for类似

　@each $member in a, b, c, d {
　　　　.#{$member} {
　　　　　　background-image: url("/image/#{$member}.jpg"); //member a,b,c,d
　　　　}
　　}

自定义函数

@function double($n){
    @return $n*2;
}
div{width: 100px;height: double(20px);background-color: red;}
avatar
文章
阅读
粉丝