写在前面乱七八糟的前言:

emmm,还是决定把Sass与Less单独出来写成一篇,可能会稍微好辣么一丢丢?TAT语法特性是真的香,通篇下来能吸收个10%自我感觉已经很nice了,毕竟渣渣的我有渣渣的自觉~本文侧重于输出Sass,对于Less的话简单带过,毕竟学会了Sass再看Less基本上就都很ok了,如果想简单上手,建议先从Less开始入门,最后再吃下我Compass的安利,┓( ´∀` )┏慢慢盘吧。

目录

1、Sass(Syntactically Awesome Style Sheets)

2、Less(emm找不到全称)

3、Sass与Less的区别

4、Compass(Sass的toolkit)

内容

1、Sass(Syntactically Awesome Style Sheets)

1.1安装:

安装ruby环境,安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量

在命令行输入gem install sass

1.2转译Sass(最后引用的还是css文件的!)

在屏幕上直接转化:sass test.scss

转化成文件:sass test.scss test.css

ps:文件命名方式最好使用英文,如提示gbk与utf-8等关键字的报错时,文件命名方式使用英文即可

1.3监听Sass

//watch a file

sass --watch test.scss:test.css

//watch a directory

sass --watch ./sass:./css

1.4Vscode的easy Sass

1.4.1安装easy Sass插件

1.4.2设置转译目标目录

文件->首选项->设置(快捷键ctrl+,)->搜索设置->easysass->Target Dir->方框内填写(或直接在settings.json中编辑"easysass.targetDir": "./css/")

ps:"easysass.targetDir": "./css/"
意思:easysass的目标目录:""
所以在变更文件夹时记得修改这个目录
比如将原先的css文件放在sass文件夹内时,应将路径更改为./sass/css/

1.5使用

1.5.1变量:

声明:$变量名:变量值;

调用:$变量名

ps:若变量名需在字符串内嵌套,则需使用#{ }包裹;

如:$black:#000;

如:$side:left;

.test{

border-#{$side}-color: $black;

}

编译为:

.test{border-left-color:#000;}

1.5.2运算

.test{

margin:(14px/2);

top:20px+20px;

right:$var *10%;

}

ps:单位会进行运算,注意最终单位

1.5.3嵌套

1.5.3.1选择器嵌套:

ul{

li{ }

}

1.5.3.2属性嵌套

border:{

color:red;

width:10px;

}

1.5.3.3伪类嵌套

ul{

li{

&:hover{ }

}

}

1.5.4混合

声明:@mixin name($param:value){ };

调用:@include name(value)

ps:声明时可带参可不带,可带默认值,但调用需符合命名规范

优点:可传参,不会生成同名class

缺点:将混合代码copy到对应的选择器中

1.5.5扩展

缘起:通常都是p,ul{ common style},往往我们需要给单独元素添加另外的样式,这个时候我们就需要把其中选择器单独出来写样式,如此一来我们维护样式就相当的麻烦,有了扩展就很舒服了

声明:.class{ }

调用:@extend .class

优点:继承相同代码并提取到并集选择器中

缺点:不可传参,在CSS中生成一个同名class

1.5.6占位符

声明:%class{ }

调用:@extand %class

优点:继承相同代码并提取到并集选择器,不会生成同名的class选择器

缺点:无法传参

ps:传参用混合,先有class用继承,无须参数无须class用占位符

1.5.7if语句

@if{ }

@else{ }

1.5.8for循环

@for $i from 1 to 10{ }不含十;

@for $i from 1 through 10{ }含十;

1.5.9while循环

$j:1;

@while $j<10{

.while#{$j}{

border:#{$j}px solid red;

}

$j:$j+1;

}

1.5.0each循环遍历

@each item in a,b,c,d{

//item 表示每一项

}

1.5.11函数

@function func($length){

$length:$length*5;

@return $length;

}

调用:func(10px);

2、Less(emm找不到全称)

2.1安装:

引入node.js

在命令行输入$ npm install -g less

2.2转译Less(可引用less文件也可引用css文件)

2.2.1命令行:

在屏幕上直接转化:$ lessc styles.less

转化成文件:$ lessc styles.less styles.css

转化成压缩版:$ lessc --clean-css styles.less styles.min.css

2.2.2代码:略

2.2.3浏览器端:

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

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

下载链接

CDN加速:<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

2.3使用:

2.3.1变量:

声明:@变量名:变量值;

调用:@变量名

2.3.2其他:略

3、Sass与Less的区别

3.1Less优势:让开发者平滑地从现存CSS文件过渡到LESS,而无需像Sass一样将CSS文件转换成Sass;有全局变量

3.2编译环境:

Sass需要安装ruby环境,是服务端处理的

Less需node js环境,引入less.js,是客户端处理的

3.2变量符

Sass用$

Less用@

3.3输出设置

Sass:四种输出风格,默认nested

nested:嵌套缩进

expanded:展开多行

compact:简洁格式

compressed:压缩

Less:嵌套与压缩min

3.4工具库

Sass:Compass,基于Sass的封装

Less:UI组件库Bootstrap

3.5文件转译

Sass:源文件不能给浏览器直接识别,需转译为css

Less:源文件无需转译为css

3.6作用域

Sass:无全局作用域,定义相同变量名时,在调用要注意

Less:首先定义局部定义的变量,若无,像冒泡一样一级级往下查找,直到根为止

3.7使用

3.7.1混合:

Sass:

/*声明一个Mixin叫作“error”*/
@mixin error($borderWidth:2px){
border:$borderWidth solid #f00;
color: #f00;
}
/*调用error Mixins*/
.generic-error {
@include error();/*直接调用error mixins*/
}
.login-error {
@include error(5px);/*调用error mixins,并将参数$borderWidth的值重定义为5px*/
}

Less:

/*声明一个Mixin叫作“error”*/
.error(@borderWidth:2px){
border:@borderWidth solid #f00;
color: #f00;
}
/*调用error Mixins*/
.generic-error {
.error();/*直接调用error mixins*/
}
.login-error {
.error(5px);/*调用error mixins,并将参数@borderWidth的值重定义为5px*/
}

3.7.2其他高级语法:略

4、Compass(Sass的toolkit)

4.1Compass是什么

简单讲:Compass是Sass的工具库(toolkit)

Sass本身只是一个编译器,Compass由SASS的核心团队成员Chris Eppstein创建,在它的基础上,封装了一系列有用的模块和模板,补充Sass的功能。它们之间的关系,有点像Javascript和jQuery、Ruby和Rails、python和Django的关系

4.2Compass安装与编译

1.安装
Linux或OS X且已安装ruby
命令行输入:sudo gem install compass
Windows系统且已安装ruby
省略sudo
2.项目初始化
compass create test
3.编译
compass complie
该命令在项目根目录下运行,会将sass子目录中的scss文件,编译成css文件,保存在stylesheets子目录中
默认状态下,编译出来的css文件带有大量的注释。但是,生产环境需要压缩后的css文件,这时要使用--output-style参数
compass compile --output-style compressed
Compass只编译发生变动的文件,如果你要重新编译未变动的文件,需要使用--force参数
compass compile --force
除了使用命令行参数,还可以在配置文件config.rb中指定编译模式
output_style = :expanded
:expanded模式表示编译后保留原格式,其他值还包括:nested、:compact和:compressed。进入生产阶段后,就要改为:compressed模式
output_style = :compressed
也可以通过指定environment的值(:production或者:development),智能判断编译模式
environment = :development
output_style = (environment == :production) ? :compressed : :expanded
在命令行模式下,除了一次性编译命令,compass还有自动编译命令
compass watch
运行该命令后,只要scss文件发生变化,就会被自动编译成css文件
1.gem安装Sass
C:\Users\DELL>gem install sass 2.查看Sass版本
C:\Users\DELL>sass -v
Sass 3.4.13 (Selective Steve) 3.编译Sass文件
sass main.scss main css
// 一般很少使用sass命令,一般都是用Compass命令; 4.gem安装Compass
C:\Users\DELL>gem install compass 5.查看Compass版本
C:\Users\DELL>compass -v
Compass 1.0.3 (Polaris)
6.Compass搭建项目
C:\Users\DELL\compass create sass
// 结果:↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 5 directory sass/
directory sass/sass/ // sass文件所在目录;
directory sass/stylesheets/ // css文件所在目录;
create sass/config.rb // 项目配置文件;
create sass/sass/screen.scss // 主要针对屏幕的sass文件;
create sass/sass/print.scss // 主要针对打印设备;
create sass/sass/ie.scss // 主要针对IE浏览器;
write sass/stylesheets/ie.css
write sass/stylesheets/print.css
write sass/stylesheets/screen.css // scss文件编译后对应的css文件;最终将引入到HTML中的文件; // You may now add and edit sass stylesheets in the sass subdirectory of your project.
// 你现在可以在sass文件的子文件中(screen.scss/print.scss/ie.scss)添加和编辑项目的样式表; // Sass files beginning with an underscore are called partials and won't be compiled to CSS, but they can be imported into other sass stylesheets.
// Sass文件以"_"开头的叫做局部文件,不会被编译成CSS;但它们可以被引入到其他Sass文件中; // You can configure your project by editing the config.rb configuration file.
// 你可以通过编辑config.rb配置文件来配置项目信息; // You must compile your sass stylesheets into CSS when they change.
// 当Sass文件被修改后,必须要编译Sass文件到CSS; // 1. To compile on demand: // 直接编译;
// compass compile [path/to/project]
// 2. To monitor your project for changes and automatically recompile:
// compass watch [path/to/project] // 监听项目变化并且自动编译; // To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
// <head>
// <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
// <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
// <!--[if IE]>
// <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
// <![endif]-->
// </head>
// 将编译后的文件引入到HTML页面中;

更多命令行方法参考:Compass官网

4.3Compass使用

Compass采用模块结构,不同模块提供不同的功能。目前,它内置五个模块:

* reset
* css3
* layout
* typography
* utilities

你还可以自行加载网上的第三方模块,或者自己动手编写模块

4.3.1reset模块

编写自己的样式之前,有必要重置浏览器的默认样式

@import "compass/reset";

@import命令,用来指定加载模块,这里就是加载reset模块。编译后,会生成相应的css reset代码

4.3.2css3模块

该模块提供19种CSS3命令

圆角

@import "compass/css3";

  .rounded {
    @include border-radius(5px);
  }

@include命令,表示调用某个mixin(类似于C语言的宏),5px是参数,这里用来指定圆角的半径

编译后的代码为

.rounded {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
  }

如果只需要左上角为圆角,写法为

@include border-corner-radius(top, left, 5px);

透明

@import "compass/css3";

  #opacity {
    @include opacity(0.5); 
  }

编译后生成

#opacity {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0.5);
    opacity: 0.5;
  }

行内区块

@import "compass/css3";

  #inline-block {
    @include inline-block;
  }

编译后生成

#inline-block {
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    zoom: 1;
    *display: inline;
  }

4.3.3layout模块

提供布局功能

比如,指定页面的footer部分总是出现在浏览器最底端:

@import "compass/layout";

  #footer {
    @include sticky-footer(54px);
  }

比如,指定子元素占满父元素的空间:

@import "compass/layout";

  #stretch-full {
    @include stretch; 
  }

4.3.4typography模块

提供版式功能

指定链接颜色的mixin为:

 link-colors($normal, $hover, $active, $visited, $focus);

使用时写成:

@import "compass/typography";

  a {
    @include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
  }

4.3.5utilities模块

供某些不属于其他模块的功能

比如,清除浮动

import "compass/utilities/";

  .clearfix {
    @include clearfix;
  }

比如表格:

@import "compass/utilities";

  table {
    @include table-scaffolding;
  }

编译后生成

table th {
    text-align: center;
    font-weight: bold;
  }

  table td,
  table th {
    padding: 2px;
  }

  table td.numeric,
  table th.numeric {
    text-align: right;
  }

4.3.6Helper函数

除了模块,Compass还提供一系列函数

有些函数非常有用,比如image-width()image-height()返回图片的宽和高。

再比如,inline-image()可以将图片转为data协议的数据。

@import "compass";

  .icon { background-image: inline-image("icon.png");}

编译后得到

  .icon { background-image: url('data:image/png;base64,iBROR...QmCC');}

函数与mixin的主要区别是,不需要使用@include命令,可以直接调用。

参考文献:

Sass与Compass入门

阮一峰Compass用法指南

Less入门手册

Sass中文网

environment = :development

  output_style = (environment == :production) ? :compressed : :expanded

20190421-那些年使用过的CSS预处理器(CSS Preprocessor)之Sass and Less的更多相关文章

  1. 前端CSS预处理器Sass

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  2. 关于前端CSS预处理器Sass的小知识!

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  3. CSS预处理器——Sass、LESS和Stylus实践

    CSS(Cascading Style Sheet)被译为级联样式表,做为一名前端从业人员来说,这个专业名词并不陌生,在行业中通常称之为“风格样式表(Style Sheet)”,它主要是用来进行网页风 ...

  4. CSS预处理器 Less Sass,Scss 编译 Sourcemap调试

    sass.less和stylus的安装使用和入门实践     SASS用法指南    Sass Basics CSS预处理器 css preprocessor 预处理器即preprocessor,预处 ...

  5. 20190421-那些年使用过的CSS预处理器(CSS Preprocessor)

    写在前面的乱七八糟的前言: emmm,不得不说,早上七点是个好时间,公园里跳广场舞的大妈,街边卖菜刀看报的大爷,又不得不说,广州图书馆是个好地方,该有的安静,该有的人气,听着楼下小孩子的声音,看着周围 ...

  6. 初识css预处理器:Sass、LESS

    这篇文章是初步介绍css预处理的,详细学习请移步官网~ 什么是css预处理器 CSS 预处理器是一种语言, 通俗易懂的话来说就是“用一种专门的编程语言,进行 Web 页面样式编写,再通过编译器转化为正 ...

  7. CSS预处理器—Sass、LESS和Stylus

    http://www.w3cplus.com/css/css-preprocessor-sass-vs-less-stylus-2.html 一.什么是CSS预处器 CSS预处理器定义了一种新的语言, ...

  8. css预处理器 sass和stylus对比以及常用功能

    在众多的css预处理器语言中,sass和stylus算是十分优秀的两个.本文主要针对两者的常用功能做个简单的对比分析.在对比中了解二者的差异,同时帮助大家更好的掌握这两种预处理语言. 本文涉及到的sa ...

  9. css预处理器sass使用教程(多图预警)

    css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...

  10. CSS预处器的对比——Sass、Less和Stylus

    预处器的对比--Sass.LESS和Stylus 转载: 英文原文:http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less ...

随机推荐

  1. ASP.Net Core MVC+Ajax 跨域

    要求 C端:用户端(http://www.b.com) A端:管理端(http://admin.b.com) 问题:A端上传图片到C端指定文件夹内保存,供C端使用. 方案 ① C端从nuget引入Mi ...

  2. 全面理解 javascript 的 argements caller callee call apply 之caller

    /** * 演示arguments的用法,如何获取实参数和形数数 */ function argTest(a,b,c,d){ var numargs = arguments.length; // 获取 ...

  3. Vue.js-10:第十章 - 组件间的数据通信

    一.前言 在上一章的学习中,我们继续学习了 Vue 中组件的相关知识,了解了在 Vue 中如何使用组件的 data.prop 选项.在之前的学习中有提到过,组件是 Vue 中的一个非常重要的概念,我们 ...

  4. .NET Core IdentityServer4实战 第一章-入门与API添加客户端凭据

    内容:本文带大家使用IdentityServer4进行对API授权保护的基本策略 作者:zara(张子浩) 欢迎分享,但需在文章鲜明处留下原文地址. 本文将要讲述如何使用IdentityServer4 ...

  5. [转载]学习Javascript闭包(Closure)

    学习Javascript闭包(Closure)     源地址: http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures ...

  6. TiDB之mac上搭建及调试技巧

    此文目的 由于本人最近已经成为TiDB的粉丝,所以就开始各种研究TiDB的源码,研究源码这个事情,首先就需要在自己电脑上不断的调试及修改.TiDB本身的代码是非常容易编译和调试的,但是要把PD.TiK ...

  7. 『取巧』VS2015试用期过后 继续试用

    背景: 个人电脑 安装的 VS2015 Community 社区版. 一直用得挺好,都忘了要登录. 直到近来,30天试用期过 —— VS弹窗:要登录用户名.密码 才能继续使用. 但是,输入了无数次 邮 ...

  8. Css3 笔记 动画 和定位属性

    transform 变形属性属性:translate 平移,rotate 旋转, scale 缩放,skew 倾斜 ◆ translate :指定对象的2D平移第一个参数对应X轴,第二参数对应Y轴:如 ...

  9. openlayers4 入门开发系列之地图导航控件篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  10. QQ登录界面布局

    简单的qq登录界面布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmln ...