关闭

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

1995人阅读 评论(0) 收藏 举报
分类:

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; }
1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1296248次
    • 积分:23585
    • 等级:
    • 排名:第303名
    • 原创:1234篇
    • 转载:156篇
    • 译文:0篇
    • 评论:124条
    最新评论