vue脚手架中配置Sass的方法


Posted in Javascript onJanuary 04, 2018

世界上最成熟、最稳定、最强大的专业级CSS扩展语言!

兼容CSS
Sass完全兼容所有版本的CSS。我们对此严格把控,所以你可以无缝地使用任何可用的CSS库。

特性丰富
Sass拥有比其他任何CSS扩展语言更多的功能和特性。Sass核心团队不懈努力,一直使其保持领先地位。

成熟
Sass已经经过其核心团队超过8年的精心打造。

行业认可
一次又一次地,行业把Sass作为首选CSS扩展语言。

社区庞大
数家科技企业和成百上千名开发者为Sass提供支持。

框架
有无数的框架使用Sass构建。比如Compass,Bourbon,和Susy。

我是在vue脚手架中安装的

1 安装

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

2 配置: 在build文件夹下的webpack.base.conf.js的rules里面添加配置

{
 test: /\.sass$/,
 loaders: ['style', 'css', 'sass']
}
// 不知道为什么我配置完就打包不了, 不配置就是好用的

3 在APP.vue中修改style标签

<style lang="scss">

4 使用

(1) 变量

1-1) 使用变量

sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值。或者,对于仅使用过一 次的属性值,你可以赋予其一个易懂的变量名,让人一眼就知道这个属性值的用途。

sass使用$符号来标识变量(老版本的sass使用!来标识变量。改成$是多半因为!highlight-color看起来太丑了。)

1-2) 变量声明

$back: red
#app
 color: $back
// 变量声明也分为全局变量和局部变量 

// 这样也是好用的

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
 border: $highlight-border;
}

//编译后

.selected {
 border: 1px solid #F90;
}

1-3) 变量命名

在sass中使用-和_其实是一样的 例如$link-color和$link_color其实指向的是同一个变量。

$link-color: blue;
a {
 color: $link_color;
}

//编译后
a {
 color: blue;
}

(2) 嵌套css规则

css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时,往往需要 一遍又一遍地写同一个ID:

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

像这种情况,sass可以让你只写一遍,且使样式可读性更高。在Sass中,你可以像俄罗斯套娃那样在规则块中嵌套规则块。sass在输出css时会帮你把这些嵌套规则处理好,避免你的重复书写。

#content {
 article {
 h1 { color: #333 }
 p { margin-bottom: 1.4em }
 }
 aside { background-color: #EEE }
}

 /* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

(2-1) 父选择器的标识符&;

使用后代选择器和为了伪类的时候可能就是比较麻烦了 不知道怎么写。这个时候&就派上用场了

article a {
 color: blue;
 &:hover { color: red }
}

// 编译后

// 其实&相当于是父级
article a { color: blue }
article a:hover { color: red }

(2-2) 群组选择器的嵌套;

在处理群组的时候只需要用,分割就好了,就能完美的解析不用内么麻烦

.container {
 h1, h2, h3 {margin-bottom: .8em}
}

<!--编译后-->

.container h1 {margin-bottom: .8em}
.container h2 {margin-bottom: .8em}
.container h3 {margin-bottom: .8em}

这种也是一样的

nav, aside {
 a {color: blue}
}
//编译后
nav a, aside a {color: blue}

(2-3) 子组合选择器和同层组合选择器:>、+和~;

上边这三个组合选择器必须和其他选择器配合使用,以指定浏览器仅选择某种特定上下文中的元素。

article {
 // 同层全体组合选择器
 ~ article { border-top: 1px dashed #ccc }
 // 直接子元素
 > section { background: #eee }
 dl > {
 dt { color: #333 }
 dd { color: #555 }
 }
 // 同层相邻组合选择器
 nav + & { margin-top: 0 }
}

(2-4) 嵌套属性;

在sass中,除了CSS选择器,属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么糟糕,但是要反复写border-styleborder-widthborder-color以及border-*等也是非常烦人的。在sass中,你只需敲写一遍border:

nav {
 border: {
 style: solid;
 width: 1px;
 color: #ccc;
 }
}

// 编译后
nav {
 border-style: solid;
 border-width: 1px;
 border-color: #ccc;
}

你甚至还可以这样写

nav {
 border: 1px solid #ccc {
 left: 0px;
 right: 0px;
 }
}

// 编译后
nav {
 border: 1px solid #ccc;
 border-left: 0px;
 border-right: 0px;
}

3 导入SASS文件;

css有一个特别不常用的特性,即@import规则,它允许在一个css文件中导入其他css文件。然而,后果是只有执行到@import时,浏览器才会去下载其他css文件,这导致页面加载起来特别慢。

sass也有一个@import规则,但不同的是,sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中,而无需发起额外的下载请求。

4 默认变量值

一般情况下,你反复声明一个变量,只有最后一处声明有效且它会覆盖前边的值。举例说明:

$link-color: blue;
$link-color: red;
a {
color: $link-color; // red
}

但是你不想这种情况你可以使用sass的!default标签可以实现这个目的。它很像css属性中!important标签的对立面,不同的是!default用于变量,含义是:如果这个变量被声明赋值了,那就用它声明的值,否则就用这个默认值。

5 注释

body {
 color: #333; // 这种注释内容不会出现在生成的css文件中
 padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

6 混合器

如果你的整个网站中有几处小小的样式类似(例如一致的颜色和字体),那么使用变量来统一处理这种情况是非常不错的选择。但是当你的样式变得越来越复杂,你需要大段大段的重用样式的代码,独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用。

混合器使用@mixin标识符定义。看上去很像其他的CSS @标识符,比如说@media或者@font-face。这个标识符给一大段样式赋予一个名字,这样你就可以轻易地通过引用这个名字重用这段样式。下边的这段sass代码,定义了一个非常简单的混合器,目的是添加跨浏览器的圆角边框。

@mixin rounded-corners {
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}

然后就可以在你的样式表中通过@include来使用这个混合器,放在你希望的任何地方。@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。如果像下边这样写:

notice {
 background-color: green;
 border: 2px solid #00aa00;
 @include rounded-corners;
}

//sass最终生成:
// 编译后
.notice {
 background-color: green;
 border: 2px solid #00aa00;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}

混合器太好用了,一不小心你可能会过度使用。大量的重用可能会导致生成的样式表过大,导致加载缓慢。所以,首先我们将讨论混合器的使用场景,避免滥用。

(6-1)给混合器传参;

混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参,来定制混合器生成的精确样式。当@include混合器时,参数其实就是可以赋值给css属性值的变量。如果你写过JavaScript,这种方式跟JavaScript的function很像:

@mixin link-colors($normal, $hover, $visited) {
 color: $normal;
 &:hover { color: $hover; }
 &:visited { color: $visited; }
}

当混合器被@include时,你可以把它当作一个css函数来传参。如果你像下边这样写:

a {
 @include link-colors(blue, red, green);
}

//Sass最终生成的是:
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

其实@mixin 的方法还有很多 可以官网查看

7 使用选择器继承来精简CSS;

使用sass的时候,最后一个减少重复的主要特性就是选择器继承。基于Nicole Sullivan面向对象的css的理念,选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现,如下代码:

//通过选择器继承继承样式
.error {
 border: 1px solid red;
 background-color: #fdd;
}
.seriousError {
 @extend .error;
 border-width: 3px;
}

.seriousError不仅会继承.error自身的所有样式,任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承,如下代码:

//.seriousError从.error继承样式
.error a{ //应用到.seriousError a
 color: red;
 font-weight: 100;
}
h1.error { //应用到hl.seriousError
 font-size: 1.2rem;
}

关于@extend有两个要点你应该知道。

跟混合器相比,继承生成的css代码相对更少。因为继承仅仅是重复选择器,而不会重复属性,所以使用继承往往比混合器生成的css体积更小。如果你非常关心你站点的速度,请牢记这一点。
继承遵从css层叠的规则。当两个不同的css规则应用到同一个html元素上时,并且这两个不同的css规则对同一属性的修饰存在不同的值,css层叠规则会决定应用哪个样式。相当直观:通常权重更高的选择器胜出,如果权重相同,定义在后边的规则胜出。

混合器本身不会引起css层叠的问题,因为混合器把样式直接放到了css规则中,而继承存在样式层叠的问题。被继承的样式会保持原有定义位置和选择器权重不变。通常来说这并不会引起什么问题,但是知道这点总没有坏处。

以上就是我在官网所了解到的信息, 不算全面, 但是觉得在日常开发肯定够用了. 附上官网地址:Sass官网地址,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
jQuery.position()方法获取不到值的安全替换方法
Mar 13 Javascript
详谈javascript中的cookie
Jun 03 Javascript
JavaScript操作表单实例讲解(上)
Jun 20 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
Element-UI中关于table表格的那些骚操作(小结)
Aug 15 Javascript
javascript事件监听与事件委托实例详解
Aug 16 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 Javascript
原生JavaScript实现刮刮乐
Sep 29 Javascript
前端 javascript 实现文件下载的示例
Nov 24 Javascript
Angular4学习教程之HTML属性绑定的方法
Jan 04 #Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 #Javascript
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 #Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 #Javascript
JS实现简易换图时钟功能分析
Jan 04 #Javascript
Angular4学习之Angular CLI的安装与使用教程
Jan 04 #Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 #Javascript
You might like
兼容PHP5的PHP目录管理函数库
2008/07/10 PHP
自制PHP框架之设计模式
2017/05/07 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
关于文本限制字数的js代码
2007/04/02 Javascript
javascript 鼠标滚轮事件
2009/04/09 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
2012/12/15 Javascript
深入理解javascript中defer的作用
2013/12/11 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
jQuery实现的表格前端排序功能示例
2017/09/18 jQuery
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
js实现秒表计时器
2019/12/16 Javascript
vue实现简单图片上传
2020/06/30 Javascript
[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局
2016/02/26 DOTA
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
一些Python中的二维数组的操作方法
2015/05/02 Python
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
python3实现ftp服务功能(客户端)
2017/03/24 Python
python文件拆分与重组实例
2018/12/10 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
Python PIL库图片灰化处理
2020/04/07 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
Tostadora意大利:定制T恤
2019/04/08 全球购物
小学生爱国演讲稿
2014/04/25 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
学生会自荐信
2019/05/16 职场文书