20190421-那些年使用过的CSS预处理器(CSS Preprocessor)之Sass and Less
写在前面乱七八糟的前言:
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命令,可以直接调用。
参考文献:
environment = :development
output_style = (environment == :production) ? :compressed : :expanded
20190421-那些年使用过的CSS预处理器(CSS Preprocessor)之Sass and Less的更多相关文章
- 前端CSS预处理器Sass
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- 关于前端CSS预处理器Sass的小知识!
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- CSS预处理器——Sass、LESS和Stylus实践
CSS(Cascading Style Sheet)被译为级联样式表,做为一名前端从业人员来说,这个专业名词并不陌生,在行业中通常称之为“风格样式表(Style Sheet)”,它主要是用来进行网页风 ...
- CSS预处理器 Less Sass,Scss 编译 Sourcemap调试
sass.less和stylus的安装使用和入门实践 SASS用法指南 Sass Basics CSS预处理器 css preprocessor 预处理器即preprocessor,预处 ...
- 20190421-那些年使用过的CSS预处理器(CSS Preprocessor)
写在前面的乱七八糟的前言: emmm,不得不说,早上七点是个好时间,公园里跳广场舞的大妈,街边卖菜刀看报的大爷,又不得不说,广州图书馆是个好地方,该有的安静,该有的人气,听着楼下小孩子的声音,看着周围 ...
- 初识css预处理器:Sass、LESS
这篇文章是初步介绍css预处理的,详细学习请移步官网~ 什么是css预处理器 CSS 预处理器是一种语言, 通俗易懂的话来说就是“用一种专门的编程语言,进行 Web 页面样式编写,再通过编译器转化为正 ...
- CSS预处理器—Sass、LESS和Stylus
http://www.w3cplus.com/css/css-preprocessor-sass-vs-less-stylus-2.html 一.什么是CSS预处器 CSS预处理器定义了一种新的语言, ...
- css预处理器 sass和stylus对比以及常用功能
在众多的css预处理器语言中,sass和stylus算是十分优秀的两个.本文主要针对两者的常用功能做个简单的对比分析.在对比中了解二者的差异,同时帮助大家更好的掌握这两种预处理语言. 本文涉及到的sa ...
- css预处理器sass使用教程(多图预警)
css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...
- CSS预处器的对比——Sass、Less和Stylus
预处器的对比--Sass.LESS和Stylus 转载: 英文原文:http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less ...
随机推荐
- ASP.Net Core MVC+Ajax 跨域
要求 C端:用户端(http://www.b.com) A端:管理端(http://admin.b.com) 问题:A端上传图片到C端指定文件夹内保存,供C端使用. 方案 ① C端从nuget引入Mi ...
- 全面理解 javascript 的 argements caller callee call apply 之caller
/** * 演示arguments的用法,如何获取实参数和形数数 */ function argTest(a,b,c,d){ var numargs = arguments.length; // 获取 ...
- Vue.js-10:第十章 - 组件间的数据通信
一.前言 在上一章的学习中,我们继续学习了 Vue 中组件的相关知识,了解了在 Vue 中如何使用组件的 data.prop 选项.在之前的学习中有提到过,组件是 Vue 中的一个非常重要的概念,我们 ...
- .NET Core IdentityServer4实战 第一章-入门与API添加客户端凭据
内容:本文带大家使用IdentityServer4进行对API授权保护的基本策略 作者:zara(张子浩) 欢迎分享,但需在文章鲜明处留下原文地址. 本文将要讲述如何使用IdentityServer4 ...
- [转载]学习Javascript闭包(Closure)
学习Javascript闭包(Closure) 源地址: http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures ...
- TiDB之mac上搭建及调试技巧
此文目的 由于本人最近已经成为TiDB的粉丝,所以就开始各种研究TiDB的源码,研究源码这个事情,首先就需要在自己电脑上不断的调试及修改.TiDB本身的代码是非常容易编译和调试的,但是要把PD.TiK ...
- 『取巧』VS2015试用期过后 继续试用
背景: 个人电脑 安装的 VS2015 Community 社区版. 一直用得挺好,都忘了要登录. 直到近来,30天试用期过 —— VS弹窗:要登录用户名.密码 才能继续使用. 但是,输入了无数次 邮 ...
- Css3 笔记 动画 和定位属性
transform 变形属性属性:translate 平移,rotate 旋转, scale 缩放,skew 倾斜 ◆ translate :指定对象的2D平移第一个参数对应X轴,第二参数对应Y轴:如 ...
- openlayers4 入门开发系列之地图导航控件篇(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- QQ登录界面布局
简单的qq登录界面布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmln ...