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 @import 规则

@import 根据文件名引入。 默认情况下,它会寻找 Sass 文件并直接引入, 但是,在少数几种情况下,它会被编译成 CSS 的 @import 规则: 如果文件的扩展名是 .css。如果文...
  • JASMINECJC
  • JASMINECJC
  • 2016年02月28日 15:10
  • 5753

sass文件的导入

css有一个特别不常用的特性,即@import规则,它允许在一个css文件中导入其他css文件。然而,后果是只有执行到@import时,浏览器才会去下载其他css文件,这导致页面加载起来特别慢。 sa...
  • zuiziyoudexiao
  • zuiziyoudexiao
  • 2017年08月20日 17:34
  • 470

使用 VSCode 编辑器来编译 Sass

VSCode 是继 Sublime Text3、Atom 后另一个让我爱不释手的编辑器,其颜值和插件生态圈与 Atom 不相上下,但比后者用起来更加丝滑流畅(Atom 需要4G+内存和SSD 才能逆天...
  • hcz297799265
  • hcz297799265
  • 2017年11月09日 13:32
  • 559

vscode编辑器——编译调试小问题

vscode visual studio code编译调试C/C++问题
  • haocrossover
  • haocrossover
  • 2017年07月22日 00:07
  • 150

sass变量详解——你所不知道的sass

写在前面:现在一直使用sass写css,当初入门的时候,看的很多教程,当时看的云里雾里的,现在看来还是蛮详细的,就是一点,不够小白。本人文章类型一直比较偏小白的,想要更好的为不会用sass提供一点学习...
  • OBKoro1
  • OBKoro1
  • 2017年04月22日 14:18
  • 930

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

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

Sass变量的使用

Sass变量的使用,在变量的前面加一个”$”美元符号就可以了,如下图
  • longzhoufeng
  • longzhoufeng
  • 2017年05月16日 23:47
  • 1560

nuxt sass全局变量也就是公共 scss 解决方案 案例

  • 2017年11月02日 14:54
  • 3KB
  • 下载

nuxt sass全局变量也就是公共 scss 解决方案

恩,经过朋友的帮助搞定的,因为 nuxt资料比较少的原因,很感谢  “包子”的帮助 我直接上案例吧http://download.csdn.net/download/xuelang532777032/...
  • xuelang532777032
  • xuelang532777032
  • 2017年11月02日 15:05
  • 1193

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

SASS是什么? 目前前端开发中css已经是公认的”前端程序员必须掌握”的知识,最早的css编写都是手工一条条写出来的,工作量大、不利于维护。 而sass的存在使得css开发可以像写代码一样最终生...
  • github_26672553
  • github_26672553
  • 2016年08月30日 23:18
  • 2803
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:sass实战演练01 - 外部文件引用和变量
举报原因:
原因补充:

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