• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeSc ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

CSS不像其它高级语言一样支持算术运算、变量、流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等。而javascript则是一种半面向对象的动态语言,有java的影子,有C的味道,中间有比其它语言多的糟粕,使用预处理办法可以解决这些问题。其中Less[les]与Sass是CSS的预处理技术,而CoffeeScript、TypeScript则是javascript的预处理技术。 

1.1、概要

Less是一种动态样式语言,Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。

Less 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数。LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。 Less是一个JS库,所以他可以在客户端运行,相对Sass则必须在服务端借助Ruby运行

中文网站: https://less.bootcss.com/

英文官网: http://lesscss.org

less源码: https://github.com/cloudhead/less.js

github地址: https://github.com/less/less.js

1.2、变量

语法:@变量名:值;

1)、以@作为变量的起始标识,变量名由字母、数字、_和-组成
2)、没有先定义后使用的规定;
3)、以最后定义的值为最终值;
4)、可用于rule值、rule属性、rule属性部件、选择器、选择器部件、字符串拼接;
5)、定义时 "@变量名: 变量值;" 的形式;引用时采用 "@变量名" 或 "@{变量名}" 的形式;
6)、存在作用域,局部作用域优先级高于全局作用域。

@color: #4d926f; 
#header { color: @color; }
#header { color: #4d926f; }
@color: #253636; 
@color: #ff3636; //覆盖第一次的定义
#header {color: @color;} //多次反复解析
#header {color: #ff3636;}

编译后:

#header {
  color: #ff3636;
}
#header {
  color: #4d926f;
}
#header {
  color: #ff3636;
}
#header {
  color: #ff3636;
}

1.3、解析Less

1.3.0、插件安装

a)、先安装node.js(https://nodejs.org/en/)

b)、安装less编译器

npm install less -g

c)、安装插件

d、配置

默认是正常的,如果发现Hbuilder不能自动翻译则需要配置

WebStorm中自动转译less为css:

 

 

1.3.1、在线处理

页面中直接引用less的源码,使用javascript动态翻译,这样在开发阶段非常方便,但是在运行阶段会影响效率,建议在开发阶段使用less.js在线处理,项目稳定运行时将less文件预处理。

步骤一:

下载到less.js动态处理.less文件的javascript脚本,下载地址: https://github.com/less/less.js

步骤二:

在页面中引入样式与less.js文件,如下:

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

测试运行

示例代码:

style1.less

/*1定义变量*/
@color:red;
@bgColor:lightgreen;  /*定义变量color,值为red*/
.cls11{
    color: @color;
}
@color:lightblue;  /*重新定义,覆盖前面的定义,后定义的起作用*/
.cls12
{
    background: @bgColor;
    border: 2px solid @color;
}

de2.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Less</title>
        <link rel="stylesheet/less" type="text/css" href="css/style1.less">
        <script src="js/less/less.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="div1" class="cls12">
            Hello Less
        </div>
    </body>
</html>

运行效果:

 

从上图可以看出less.js将style1.less文件翻译后变成了一个标准的CSS内部样式表。

1.3.2、预处理

在线处理的效率低,预处理就是将less文件先翻译成标准的CSS文件,再引入到项目中,处理的办法有许多:

方法一:使用lessc

a)、请先在电脑上安装node.js,下载地址: https://nodejs.org/en/

a)、安装lessc

使用npm(node.js package management)node.js包管理器

在命令行模式下输入安装指令:npm install less -g

使用lessc翻译less文件为css文件:
lessc styles.less 显示

lessc styles.less > styles.css 生成文件

参数 –x 普通压缩

参数 -h 帮助

-x的压缩方法已经被弃用,建议使用清理插件。

方法二:使用工具软件

能够翻译Less的工具软件有不少,这里介绍:Koala

Koala是一个开源的预处理语言图形编译工具,目前已支持Less、Sass、Compass与CoffeeScript。
功能特性:
多语言支持: 支持Less、Sass、Compass与CoffeeScript。
实时监听与编译: 在后台监听文件的变动,检测到文件被修改后将自动进行编译。
编译选项支持: 可以设置与自定义你需要的编译选项。
压缩支持: Less、Sass可直接编译生成压缩后的css代码。
错误提示: 编译中如果遇到错误,Koala将在右下角提示并显示出具体的出错地方,方便开发者快速定位。
跨平台: Windows、Mac、Linux完美支持。
安装Koala
在Koala官网根据你的系统平台下载对应的版本。Linux系统要求已安装好ruby运行环境。

下载地址: http://koala-app.com/

注意:路径中不要使用中文,切记!

方法三:使用IDE插件

如果使用Eclipse,Hbuilder,Visual Studio等开发工具可以安装插件完成自动翻译功能,这里使用HBuilder,在工具->插件下可以选择安装,如下图所示:

使用方法:

新建Less文件,保存后会自己生成对应的CSS文件。

1.4、混入(Mixins)

类似函数或宏

定义函数,@radius是参数,3px是默认值

.borderRadius(@radius:3px){

-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;

}

使用函数,带参数

#header { .borderRadius(10px); }

不带参数使用默认参数
.btn { .borderRadius}

注意:

a)、可以不使用参数 .wrap(){…} .pre{ .wrap },也可以使用多个参数
b)、内置变量@arguments代表所有参数(运行时)的值 .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){ box-shadow: @arguments; }

注意,在参数没有默认值的前提下使用@arguments调用时必须赋值,否则会导致整个页面内的less语法出错而失效。
c)、Mixins必须使用ID或者类,即#xx或.xx,否则无效。

Less示例代码:

/*混入(Mixins)*/
/*定义*/
.circle(@width:100px, @color:lightblue) {
    width: @width;
    height: @width;
    background: @color;
    border-radius: @width/2;
    float: left;
}
.boxShadow(@x:0, @y:0, @blur:1px, @color:#000) {
    box-shadow: @arguments;
}
/*调用*/
.cls21 {
    .circle();
    /*默认值*/
}
.cls22 {
    .circle(200px,lightgreen);
    /*带参数*/
   .boxShadow(5px,5px);
}
.cls23 {
    .circle(300px);
    /*带一个参数*/
}

HTML页面:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Less</title>
        <link rel="stylesheet" type="text/css" href="css/style2.css" />
    </head>
    <body>
        <div id="div1" class="cls21">
        </div>
        <div id="div1" class="cls22">
        </div>
        <div id="div1" class="cls23">
        </div>
    </body>
</html>

翻译结果:

/*调用*/
.cls21 {
  width: 100px;
  height: 100px;
  background: lightblue;
  border-radius: 50px;
  float: left;/*默认值*/
}
.cls22 {
  width: 200px;
  height: 200px;
  background: lightgreen;
  border-radius: 100px;
  float: left;
  /*带参数*/
  box-shadow: 5px 5px 1px #000;
}
.cls23 {
  width: 300px;
  height: 300px;
  background: lightblue;
  border-radius: 150px;
  float: left;/*带一个参数*/
}
/*# sourceMappingURL=style2.css.map */

运行效果:

1.5、嵌套   

允许将多个CSS选择器嵌套在一起,&表示当前选择器的父选择器

#header {
&.fl{ float: left; }
.mln { margin-left: 0; }
}
生成
#header.fl{float: left;}
#header .mln {margin-left: 0;}

示例:

/*嵌套*/
#parent {
    color: red;
    .sub11 {
        background: green;
    }
    &.sub12 {
        width: 100px;
    }
    .sub13 {
        height: 200px;
        .sub131 {
            font-size: 10px;
        }
    }
}

结果:

/*嵌套*/
#parent {
  color: red;
}
#parent .sub11 {
  background: green;
}
#parent.sub12 {
  width: 100px;
}
#parent .sub13 {
  height: 200px;
}
#parent .sub13 .sub131 {
  font-size: 10px;
}

1.6、运算

运算主要是针对任何数字、颜色、变量的操作,支持加、减、乘、除、()或者更复杂的综合运算;

@init: #111111;
@transition: @init*2;
.switchColor { color: @transition; }

算术运算示例:

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

运行结果:

.cls41 {
  color: #222222;
  background-color: #bee9f7;
  height: 60%;
}

1.7、函数

Less 提供了许多用于转换颜色,处理字符串和进行算术运算的函数

.lightColor{lighten(@color, 10%); }

更多函数: http://www.lesscss.net/functions/

示例:

/*函数*/
.cls51 {
    /*将一个资源内嵌到样式文件,如果开启了ieCompat选项,而且资源文件的体积过大,或者是在浏览器中使用,则会使用url()进行回退。如果没有指定MIME,则Node.js会使用MIME包来决定正确的MIME。*/
    background: data-uri('../img/yes.gif') no-repeat;
    height: 20px;
}
.cls52 {
    /*增加一定数值的颜色亮度。*/
    background: lighten(blue,20%);
}

翻译结果:

/*函数*/
.cls51 {
  /*将一个资源内嵌到样式文件,如果开启了ieCompat选项,而且资源文件的体积过大,或者是在浏览器中使用,则会使用url()进行回退。如果没有指定MIME,则Node.js会使用MIME包来决定正确的MIME。*/
  background: url("data:null;base64,R0lGODlhDAAMAKIAAMznjyJ6Gu732TKGFq7ZTF+nDI7JBf///yH5BAAAAAAALAAAAAAMAAwAAAM8eCdAZgQItdy7RAlXyhidBhjdEAQD1ZDHGVDQUyivMlws1d6xR6EFyKi06xgkHA8oSJhscI8mhWGJTA4JADs=") no-repeat;
  height: 20px;
}
.cls52 {
  /*增加一定数值的颜色亮度。*/
  background: #6666ff;
}

运行效果:

1.8、继承    

示例代码:

/*继承*/
.animal {
    background-color: black;
    color: white;
}
.bear {
    &:extend(.animal);
    background-color: brown;
}
.mouse{
    &:extend(.animal);
}

翻译结果:

/*继承*/
.animal,
.bear,
.mouse {
  background-color: black;
  color: white;
}
.bear {
  background-color: brown;
}

1.9、作用域

同一级的变量后者覆盖前者,内部变量优先级高于外部变量,变量只在同一个文件中生效。

示例:

/*作用域*/
@len:10px;
.cls61{
    @len:20px;
    height:@len;
}
.cls62{
    width:@len;
}
@len:30px;
.cls63{
    height: @len;
}

结果:

.cls61 {
  height: 20px;
}
.cls62 {
  width: 30px;
}
.cls63 {
  height: 30px;
}

1.10、注释

示例:

/*注释*/
.cls71{
   width: 100px;  //单行注释,CSS中不允许单行注释,Less允许
    height:100px; /* 多行注释,CSS与Less都允许 */
}

结果:

/*注释*/
.cls71 {
  width: 100px;
  height: 100px;/* 多行注释,CSS与Less都允许 */
}

1.11、循环

在Less中,混合可以调用它自身。这样,当一个混合递归调用自己,再结合Guard表达式和模式匹配这两个特性,就可以写出循环结构。

less源码:

.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));    // 递归调用自身
  width: (10px * @counter); // 每次调用时产生的样式代码
}

div {
  .loop(3); // 调用循环
}

 

生成css:

div {
  width: 30px;
  width: 20px;
  width: 10px;
}

 

less源码(生成栅格系统):

.generate-columns(5);
.generate-columns(@n, @i: 1) when (@i =< @n) {
    .column-@{i} {
        width: (@i * 100% / @n);
    }
    .generate-columns(@n, (@i + 1));
}

 

生成css:

.column-1 {
  width: 20%;
}
.column-2 {
  width: 40%;
}
.column-3 {
  width: 60%;
}
.column-4 {
  width: 80%;
}
.column-5 {
  width: 100%;
}

 

1.12、示例代码

style.less:

/*1.3、变量**/

@color: red;

/*1.4、混入(Mixins)**/

.circle(@length: 100px, @color: lightblue) {
    width: @length;
    height: @length;
    background: @color;
    border-radius: @length/3;
    float: left;
}

.boxshadow(@x: 3px, @y: 3px, @blur: 3px, @color: #999) {
    box-shadow: @arguments;
    box-shadow: @x @y @blur @color;
}

.c1 {
    .circle();
    /**默认参数*/
}

.c2 {
    .circle(200px, lightgreen);
    /**指定所有参数*/
}

.c3 {
    .circle(300px);
    /**指定部分*/
}

.c4 {
    .circle(400px);
    /**指定部分*/
    .boxshadow(5px, 5px, 5px, #00f);
}

.c5 {
    .circle(500px);
    /**指定部分*/
    .boxshadow();
}


/*1.5、嵌套 **/

#main {
    color: @color;
    .sub1 {
        width: 100px;
        .sub11 {
            background: #00f;
        }
    }
    &.sub2 {
        height: 100px;
    }
}

@color: blue;

/*1.6、运算**/

@i: 10rem;
@pcolor: blue;
@color: #0000ff;
.cls16 {
    width: @i+10/2;
    background: #000111+#111000;
    color: @pcolor+#00ff00;
}


/*1.7、函数**/

.lightColor {
    width: floor(2.6)px;
}

.bg {
    background: data-uri('dot2.gif');
}


/*1.8、继承 **/

.animal {
    color: black;
    background: white;
}

.duck {
    &:extend(.animal);
    color: yellow;
}

.tduck {
    &:extend(.duck);
    min-height: 100px;
}

.pig {
    &:extend(.animal);
}


/*1.9、作用域*/

@len: 10px;
.cls61 {
    @len: 20px;
    height: @len;
}

@len: 30px;
.cls62 {
    width: @len;
}

@len: 40px;
.cls63 {
    height: @len;
}

@len: 50px;

/*1.10、注释**/

.c {
    width: 100px; //宽100px
}


/*1.11、循环*/

.loop(@counter) when (@counter > 0) {
    width: (10px * @counter); // 每次调用时产生的样式代码
    .loop((@counter - 1)); // 递归调用自身
}

div {
    .loop(3); // 调用循环
}

.generate-columns(5);
.generate-columns(@n, @i: 1) when (@i =< @n) {
    .column-@{i} {
        width: (@i * 100% / @n);
    }
    .generate-columns(@n, (@i + 1));
}
View Code

 

style.css:

/*1.3、变量**/


/*1.4、混入(Mixins)**/

.c1 {
    width: 100px;
    height: 100px;
    background: lightblue;
    border-radius: 33.33333333px;
    float: left;
    /**默认参数*/
}

.c2 {
    width: 200px;
    height: 200px;
    background: lightgreen;
    border-radius: 66.66666667px;
    float: left;
    /**指定所有参数*/
}

.c3 {
    width: 300px;
    height: 300px;
    background: lightblue;
    border-radius: 100px;
    float: left;
    /**指定部分*/
}

.c4 {
    width: 400px;
    height: 400px;
    background: lightblue;
    border-radius: 133.33333333px;
    float: left;
    /**指定部分*/
    box-shadow: 5px 5px 5px #00f;
}

.c5 {
    width: 500px;
    height: 500px;
    background: lightblue;
    border-radius: 166.66666667px;
    float: left;
    /**指定部分*/
    box-shadow: 3px 3px 3px #999;
}


/*1.5、嵌套 **/

#main {
    color: #0000ff;
}

#main .sub1 {
    width: 100px;
}

#main .sub1 .sub11 {
    background: #00f;
}

#main.sub2 {
    height: 100px;
}


/*1.6、运算**/

.cls16 {
    width: 15rem;
    background: #111111;
    color: #00ffff;
}


/*1.7、函数**/

.lightColor {
    width: 2 px;
}

.bg {
    background: url("data:image/gif;base64,R0lGODlhCQALAJEAAAAAAP///wCO/////yH5BAEAAAMALAAAAAAJAAsAAAITnI8naeLsllq0vlhHnhJFpoFMAQA7");
}


/*1.8、继承 **/

.animal,
.duck,
.pig,
.tduck {
    color: black;
    background: white;
}

.duck,
.tduck {
    color: yellow;
}

.tduck {
    min-height: 100px;
}


/*1.9、作用域*/

.cls61 {
    height: 20px;
}

.cls62 {
    width: 50px;
}

.cls63 {
    height: 50px;
}


/*1.10、注释**/

.c {
    width: 100px;
}


/*1.11、循环*/

div {
    width: 30px;
    width: 20px;
    width: 10px;
}

.column-1 {
    width: 20%;
}

.column-2 {
    width: 40%;
}

.column-3 {
    width: 60%;
}

.column-4 {
    width: 80%;
}

.column-5 {
    width: 100%;
}
View Code

 

二、Sass

Sass与Less类似类似也是一种CSS的预编译语言,他出现的更晚,但功能更加强大,Sass 有两种语法。 第一种被称为 SCSS (Sassy CSS),是一个 CSS3 语法的扩充版本;第二种比较老的语法成为缩排语法(或者就称为 "Sass"), 提供了一种更简洁的 CSS 书写方式特点如下:

特点:

1)、不能直接在页面中解析,需要使用ruby预先翻译成css文件,而Less可以在线动态翻译。

2)、Sass功能更加强大,拥有流控语句等Less不具备的功能

3)、完全兼容 CSS3,在 CSS 语言基础上添加了扩展功能,比如变量、嵌套 (nesting)、混合 (mixin)

在使用时Sass的后缀名为scss,本文全部使用scss的语法,可以安装Koala直接解析,不需要去搭建ruby环境,Koala已封装好。

下载地址: http://koala-app.com/

2.1、变量

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

Sass代码:

/*变量*/
$width:1004px;
$color:blue;

.cls11
{
    width: $width;
    height: $width/2;
    background: $color;
}
$width:100px;
$color:red;
.cls12
{
    $color:green;
    width: $width;
    height: $width/2;
    background: $color;
}

CSS代码:

.cls11 {
  width: 1004px;
  height: 502px;
  background: blue; }

.cls12 {
  width: 100px;
  height: 50px;
  background: green; }

2.2、嵌套

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

.cls21 
{
    width: 100px;
    .cls22{
        height: 200px;
    }
    .cls23
    {
        color:blue;
    }
}

 CSS代码:

.cls21 {
    width: 100px;
}

.cls21 .cls22 {
    height: 200px;
}

.cls21 .cls23 {
    color: blue;
}

复杂的嵌套:

.news{

  //忽略root嵌套
  @at-root
    .news_title{
      width: 10px;
    }

  // 合并嵌套
  .news_content{
    width: 20px;
  }

  //组合嵌套
  &_content1{
    width: 20px;
    &_content2{
      width: 20px;
    }
  }

}

结果:

.news .news_content {
    // 在根节点.news下
    width: 20px;
}

.news_content1 {
    // 组合了根节点.news成为当前标签的一部分
    width: 20px;
}

.news_content1_content2 {
    // 多层组合&值为上一层的标签名称
    width: 20px;
}

2.3、导入

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

$zero:0;
$PI:3.14;
*
{
    margin: $zero;
    padding: $zero;
}
body,html{
    height: 100%;
}

Sass代码:

@import "reset";
.cls31 {
    /*height: zero; */
    /*error*/
}

 CSS代码:

* {
  margin: 0;
  padding: 0; }

body, html {
  height: 100%; }

.cls31 {
  /*height: zero; */
  /*error*/ }

2.4、mixin 混入

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

SCSS样式:

@mixin circle($size:100px,$color:lightblue){
    width: $size;
    height: $size;
    border-radius: $size/2;
    background: $color;
}

.cls41{
    @include circle();
}

.cls42{
    @include circle(150px);
}

.cls43{
    @include circle(200px,lightgreen);
}

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap