1370人阅读
nodejs+gulp+webpack+sass基础篇（32）
SASS是什么？
目前前端开发中css已经是公认的”前端程序员必须掌握”的知识，最早的css编写都是手工一条条写出来的，工作量大、不利于维护。
而sass的存在使得css开发可以像写代码一样最终生成一个正常的css文件。
我们直接开干
新建一个文件，后缀名为scss（为什么看到有的资料是.sass?）
sass有2种语法：
1.一种是以sass后缀，对代码的排版有着非常严格的要求，而且没有大括号，没有分号
2.一种是以scss后缀，更接近我们程序写法，比如大括号，分号
sass是ruby写的，但你并不需要懂ruby，另外理论上需要安装ruby（但是我们现在有了nodejs和webpack在手）
安装node-sass
npm install node-sass gulp-sass --save-dev
必须要安装，它是node调用css预编译器库的桥梁
gulp-sass依赖node-sass来进行协调编译我们的scss文件
1.编辑scss文件
global.scss 一些全局的样式
margin: 0;
padding: 0;
font-size: 14px
vars.scss 一些变量
$blue-font:#1b85ff;
index.scss 如何引入外部的scss、使用变量
@import "./common/global";
@import "./common/vars";
color: $blue-font
2.用gulp来编译，修改gulpfile.js：
var gp = require('gulp');
var sass = require("gulp-sass");
gp.task("css",function(){
gp.src("./mycss/index.scss").pipe(sass()).pipe(gp.dest("./mycss/"))
3.执行gulp任务
$ gulp css
4.查看gulp编译的index.css
margin: 0;
padding: 0;
font-size: 14px; }
color: #1b85ff; }
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：905955次
积分：20193
积分：20193
排名：第378名
原创：1176篇
转载：151篇
评论：92条
(7)(14)(19)(35)(30)(51)(54)(60)(76)(27)(57)(96)(80)(33)(14)(40)(83)(83)(82)(106)(36)(26)(41)(82)(44)(26)(19)(24)(7)Web前端资源网 - 为什么使用SASS/SCSS？
为什么使用SASS/SCSS？
或许你已经听过一个叫作Sass的东东？可能你已经了解它，并且你能像大师一样写出一些函数？
对于不清楚我在讲什么的读者或者客户，你们可以想想web开发过程，你们的期望和站点用户的体验想要怎样的。无论如何，我都要给大家分享一下，为什么我认为Sass是一个很好的东西。
对于那些不熟悉web前端开发的人，Sass和CSS或许只是一些让人感觉凌乱的词语，但就是这些词语，对于幕后的开发过程是很重要！
易维护，更方便的定制&
对于一个大型或者稍微有规模的UI来说，如果需要替换下整体风格，或者是某个字体的像素值，比如我们经常会遇到panel，window以及portal共用一个背景色，这个时候按照常规的方式，我们需要一个个定位到元素使用的class，然后逐个替换，SASS提供了变量的方式，你可以把某个样式作为一个变量，然后各个class引用这个变量即可，修改时，我们只需修改对应的变量。&
对于编程人员的友好&
对于一个没有前端基础的编程人员，写css样式是一件非常痛苦的事情，他们会感觉到各种约束，为什么我不能定一个变量来避免那些类似&变量&的重复书写？为什么我不能继承上个class的样式定义？。。。SASS/SCSS正是帮编程人员解开了这些疑惑，让css看起来更像是一门编程语言。&
效率的提升&
对于一个前端开发人员来说，我不熟悉编程，也不关注css是否具有的一些编程语言特性，但这不是你放弃他的理由，css3的发展，加之主流浏览器的兼容性不一，很多浏览器都有自己的兼容hack，很多时候我们需要针对不同的浏览器写一堆的hack，这种浪费时间的重复劳动就交给SASS处理去吧！
什么是Sass？
Sass（Syntactically Awesome Style Sheets）是一个相对新的编程语言，Sass为web前端开发而生，可以用它来定义一套新的语法规则和函数，以加强和提升CSS。通过这种新的编程语言，你可以使用最高效的方式，以少量的代码创建复杂的设计。它改进并增强了CSS的能力，增加了变量，局部和函数这些特性。而这只使Sass一部分利器！
回过头看，CSS是层叠样式表，是一种样式表语言，旨在方便地分离设计和内容。内容可以采用其他多种语言来提供，如静态HTML或动态的PHP（以及许多其他）提供服务，而样式，通常使用CSS来实现。
当你指定一个目标元素，并为该元素设置或更改属性值时，你可以创建一组规则。例如，一个按钮可以有一个边框，你通过使用CSS就可以准确并细致地控制边框的类型，厚度和颜色，然后还可以改变它的背景颜色和按钮的文本颜色，你只需要短短的三行。
一个CSS示例：
border: solid 3
// 按钮边框样式
background-color:
//按钮背景颜色
// 按钮文本颜色
&Sass与CSS有什么区别？
Sass正是加入CSS的语法规则。你仍然可以在Sass中写普通的CSS语句，它会工作得很好，其实，当你写Sass代码时，文件会被编译成一个标准的CSS文件... ...会有专门的软件来完成Sass代码让浏览器识别和转换成CSS代码。
伟大的事情
因此，从一位代码高手的角度来看，Sass中最好的东西实际上就是它&最简单的想法&，为什么不把它们摆在首位...
我将会尽力解释几个Sass中最酷的功能，以及它们对你和你的网站来说意味着什么。
第一个对Web开发人员的工作流程造成最大影响是Sass语法中的代码嵌套和缩进。使用常规的CSS，每个元素在自己的&声明块&中独立变化，你可以想象一下，如果一个房间里满地都是不同大小的箱子会是什么样子。而通过Sass，你可以在嵌套的块里将相关的元素组合在一起，然后想象一下，同样是那个房间，现在，一些小箱子已经放在大箱子里了，你可以再次看到可爱的地板了。
background-color:
padding: 10px 15
.navigation {
border: solid 1
text-decoration:
padding: 10
.social-buttons {
background-color:
margin-right: 5
现在，它似乎也没什么大不了的，但一旦你习惯了这样编写代码，就没有了回头路。那么，它是怎样提高开发过程的？
在设计元素的逻辑中，这么做足够产生一个更加一致的视觉效果，而且让后期千百次的创建和维护变得更加容易。
当你能在几百行代码中轻松找出隐藏在其中的小错并且快速修复时，你就应该觉悟：助你完成这一壮举的Sass，必定会在前端开发领域产生巨大的反响...这样让人感觉有些成就感。
尽管如此，我个人最喜欢的还是变量。大多数程序员都知道它的关键所在和怎么使用。本质上，它是一个命名容器，用于承载整个编程项目中会重复使用的信息。
最好的例子是颜色。如果你想保持配色方案的完整性，你可以把颜色值存储在变量中，然后用于整个网站的设计。您也可以使用它们来存储其他公共的值，如字体名称，填充值和其它乱七八糟的东西，或者你在后面可能会改变的东西。变量使Web开发更便捷，而且极大地确保了整个设计项目的可用性和一致性。
// 实用的：结构变量
$pageWidth: 100%;
$containerWidth: 960
// 描述的：颜色变量
$grey: #E3E3E3;
$blue: #1f605b;
$white: #FFFFFF;
$black: #000000;
在一个网站的设计（样式表）中使用变量会为客户带来许多好处。最强的是设计的一致性。通过精确控制哪些地方使用何种颜色，避免了二十种不同的蓝色色调散落在整个网站的情况。
第二个最有用的好处是在设计过程中，当最后的配色方案仍在进行调整或改变，或者客户改变主意要用粉红色代替蓝色，变量使得你能很容易地在你的样式表中定位，只需要改变一个变量值，整个站点瞬间就能改变颜色。其它还有很多使用变量的方法，但我想你已经懂了。
Sass也通过另一种强大的方式帮你组织文件&&使用局部系统。这是一种组织各种不同部分样式表的方法，样式表只在需要时才被引入、使用。
把你的样式表分成不同的部分，如页眉或页脚，样式表会立刻变得更高效，而且更加可维护。如果你想达到更好的效果，你可以将文件分割成一些可重用的模块如导航、文章或按钮，这样你可以随处使用它们。
// Reset, Variables, Mixins, Global Settings,
@import "variables";
@import "helpers/mixins";
@import "helpers/normalize";
@import "helpers/global";
// The SITE incl. Global Elements Styles
@import "site";
@import "credits";
那么，局部如何帮助你呢？
好吧，在技术上它首先帮助了我，然后通过我来帮助你。局部，通过把你的项目中有逻辑的、能够被复用、移动、或者编辑的部分组织起来，使设计师或程序员的生活更轻松，这对设计师是有意义的。它使得维护一个局文件，组织大型项目变得更加容易。
现在来看一些好东西。
Sass的另一大特点是，你可以在你的项目中创建和使用自己的混合宏，这会帮助设计人员节省大量的时间和代码。混合宏是小的代码片段（类似局部），你可以在项目中任何需要的地方，通过@include来复用它们。
混合宏和变量配合使用会在修改某一处代码时产生很强大的能力，一个很好的例子是在按钮上创建圆角。通过使用预先设计好的包含创建圆角代码的混合宏，其中用变量代替圆角值，这样就能方便地对border-radius进行更改。
// Border Radius Mixin
// Use as: @include border-radius(10px);
@mixin border-radius($radius) {
-webkit-border-radius: $
-moz-border-radius: $
-khtml-border-radius: $
border-radius: $
使用混合宏的效果不会总是如此明显，但它仍然为你的网站设计提供了有价值的服务。使用恰当时，它们可以帮助设计者为更复杂的浏览器维护兼容的代码，如边框特效，透明背景，CSS3动画和其他等等。
来自设计师的一行代码使你看到了一个美丽的泛着黄色光芒按钮，当你点击按钮时，它像旋风一样消失了，这类奇妙的效果会兼容尽可能多的不同的浏览器和设备。
还有不少其他的东西使Sass称为超级有用而值得一提的语言。
首先是能够在样式表中使用数学函数。这在创建不同大小的网格时是特有用的，或者可以为实现更好的动态响应式设计。
另一个很好的例子是不起眼的父容器选择器&&连字符&&&这使设计人员能够通过选择器元素创建专用的规则，例如在一个嵌套的代码块中定义链接元素的鼠标悬停状态。
Sass还有许多其他强大的功能，如隐藏注释，占位符选择器，数据类型，颜色操作，变量的默认值，扩展，控制指令（如@if，@for或@while）等。
如果你有兴趣阅读一番，看看。
哇......所以，那么多迷人的功能。现在，正常的CSS工作感觉就像玩一个8位游戏机&&而我明明已经可以使用PS3来玩了。抛开这个坏的比喻不说，Sass肯定已经盖过了原来介绍的web设计中CSS的功能和效率。
Sass已经为开发过程打开了一个全新的局面，带来了技术性的变革，它最终为网站的开发者带来了好处，反过来又让我们的客户感到满意。
文章出处：/whats-great-sass/
学习使人进步，交流让人提高！
Bootstrap/HTML5/CSS3交流群：
Orchard/Nopcommerce/Umbraco交流群：
Bootstrap/HTML5/CSS3交流二群：sass guide
十分钟入门
sass十分钟入门
sass中可以定义变量，方便统一修改和维护。
//sass style
//-----------------------------------
$fontStack:
Helvetica, sans-
$primaryColor: #333;
font-family: $fontS
color: $primaryC
//css style
//-----------------------------------
font-family: Helvetica, sans-
color: #333;
sass可以进行选择器的嵌套，表示层级关系，看起来很优雅整齐。
//sass style
//-----------------------------------
margin: 0;
padding: 0;
list-style:
li { display: inline- }
padding: 6px 12
text-decoration:
//css style
//-----------------------------------
margin: 0;
padding: 0;
list-style:
display: inline-
padding: 6px 12
text-decoration:
sass中如导入其他sass文件，最后编译为一个css文件，优于纯css的@import
//sass style
//-----------------------------------
// _reset.scss
margin: 0;
padding: 0;
//sass style
//-----------------------------------
// base.scss
@import 'reset';
font-size: 100% Helvetica, sans-
background-color: #
//css style
//-----------------------------------
html, body, ul, ol {
margin: 0;
padding: 0;
background-color: #
font-size: 100% Helvetica, sans-
sass中可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。
//sass style
//-----------------------------------
@mixin box-sizing ($sizing) {
-webkit-box-sizing:$
-moz-box-sizing:$
box-sizing:$
.box-border{
border:1px solid #
@include box-sizing(border-box);
//css style
//-----------------------------------
.box-border {
border: 1px solid #
-webkit-box-sizing: border-
-moz-box-sizing: border-
box-sizing: border-
sass可通过@extend来实现代码组合声明，使代码更加优越简洁。
//sass style
//-----------------------------------
.message {
border: 1px solid #
padding: 10
color: #333;
.success {
border-color:
border-color:
.warning {
border-color:
//css style
//-----------------------------------
.message, .success, .error, .warning {
border: 1px solid #
padding: 10
color: #333;
.success {
border-color:
border-color:
.warning {
border-color:
sass可进行简单的加减乘除运算等
//sass style
//-----------------------------------
.container { width: 100%; }
article[role="main"] {
width: 600px / 960px * 100%;
aside[role="complimentary"] {
width: 300px / 960px * 100%;
//css style
//-----------------------------------
.container {
width: 100%;
article[role="main"] {
width: 62.5%;
aside[role="complimentary"] {
width: 31.25%;
sass中集成了大量的颜色函数，让变换颜色更加简单。
//sass style
//-----------------------------------
$linkColor: #08c;
text-decoration:
color:$linkC
color:darken($linkColor,10%);
//css style
//-----------------------------------
text-decoration:
color: #0088
color: #006699;sass guide
十分钟入门
sass十分钟入门
sass中可以定义变量，方便统一修改和维护。
//sass style
//-----------------------------------
$fontStack:
Helvetica, sans-
$primaryColor: #333;
font-family: $fontS
color: $primaryC
//css style
//-----------------------------------
font-family: Helvetica, sans-
color: #333;
sass可以进行选择器的嵌套，表示层级关系，看起来很优雅整齐。
//sass style
//-----------------------------------
margin: 0;
padding: 0;
list-style:
li { display: inline- }
padding: 6px 12
text-decoration:
//css style
//-----------------------------------
margin: 0;
padding: 0;
list-style:
display: inline-
padding: 6px 12
text-decoration:
sass中如导入其他sass文件，最后编译为一个css文件，优于纯css的@import
//sass style
//-----------------------------------
// _reset.scss
margin: 0;
padding: 0;
//sass style
//-----------------------------------
// base.scss
@import 'reset';
font-size: 100% Helvetica, sans-
background-color: #
//css style
//-----------------------------------
html, body, ul, ol {
margin: 0;
padding: 0;
background-color: #
font-size: 100% Helvetica, sans-
sass中可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。
//sass style
//-----------------------------------
@mixin box-sizing ($sizing) {
-webkit-box-sizing:$
-moz-box-sizing:$
box-sizing:$
.box-border{
border:1px solid #
@include box-sizing(border-box);
//css style
//-----------------------------------
.box-border {
border: 1px solid #
-webkit-box-sizing: border-
-moz-box-sizing: border-
box-sizing: border-
sass可通过@extend来实现代码组合声明，使代码更加优越简洁。
//sass style
//-----------------------------------
.message {
border: 1px solid #
padding: 10
color: #333;
.success {
border-color:
border-color:
.warning {
border-color:
//css style
//-----------------------------------
.message, .success, .error, .warning {
border: 1px solid #
padding: 10
color: #333;
.success {
border-color:
border-color:
.warning {
border-color:
sass可进行简单的加减乘除运算等
//sass style
//-----------------------------------
.container { width: 100%; }
article[role="main"] {
width: 600px / 960px * 100%;
aside[role="complimentary"] {
width: 300px / 960px * 100%;
//css style
//-----------------------------------
.container {
width: 100%;
article[role="main"] {
width: 62.5%;
aside[role="complimentary"] {
width: 31.25%;
sass中集成了大量的颜色函数，让变换颜色更加简单。
//sass style
//-----------------------------------
$linkColor: #08c;
text-decoration:
color:$linkC
color:darken($linkColor,10%);
//css style
//-----------------------------------
text-decoration:
color: #0088
color: #006699;问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
最近刚接触学css预处理，请教下定义的公用变量之间能被不同的文件引用么？
比如：有3个文件，分别是global.less，list.less，form.less，在 global 中定义的值能分别在其他文件中引入么？怎么引？
css/* global.less */
@gray: #d7d7d7;
/* list.less */
li{border:1px solid @}
/* form.less */
li{border:2px dashed @}
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
"文件名" 不要后缀名
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
你看一下这篇文章：
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
@import "global" 导入这个文件即可
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
刚查了一下这个问题，
@import 'xxx.less' 放在开头
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
好像是Sass有import "sassFileName" 的功能 ，导入之后就能使用人家文件的变量了吧less有没有，不清楚，求解：__
====sorry 我是菜鸟，以上回答没有考证，能不能用人家的变量还不知道，待更新....
该答案已被忽略，原因：
同步到新浪微博
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
扫扫下载 App}