【第22期】观点:IT 行业加班,到底有没有价值?

sass实战演练01 - 外部文件引用和变量

原创 2016年08月30日 23:18:22

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";

h1{
  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; }

h1 {
  color: #1b85ff; }
版权声明: 举报

相关文章推荐

使用 sass/scss 编写CSS 快速上手

CSS不是一种编程语言,它只是个配置文件,并没有生命。但我等大程序怎么能容忍自己写出来的东西不能动态变化,不能封装继承,不能xxoo呢,于是就有了css预处理的概念。这篇文章主要介绍scss的基本用法...

SASS/SCSS 使用指南

关于sass 3.3.0更新说明——3.3.0 sublime相关插件为:scss语法高亮,sass语法高亮,编译,保存即编译,格式化 文件后缀名 sass有两种后缀名文件:一种后缀名为sass...

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

sass实战演练02 - 嵌套、mixin、变量计算、颜色函数

上一节我们已经做到 这节课我们的需求一 让所有的container内部的div内部的元素居中 今天的知识点mixin 这是一个很有用的代码片段标记,就好像定义了函数一样(只是好像) @mix...

Maven pom.xml 如何引用外部变量

1.怎样使每次测试时不删除数据库中表结构?     解答:将pom.xml配置中的如下代码屏蔽掉。             <!--plugin&...

Re:从零开始的实习生活01----webstorm和intellij idea下如何自动编译sass和scss文件

webstorm和intellij idea下配置file Watcher使其可以自动编译sass和scss文件,不需要用命令行编译sass和scss文件。

演练Ant实战之Jar文件数字签名

代码   build.properties   ==================================   #public info      module = test      JAVA_HOME = C:\\j2sdk1.4.2_04      keystore...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)