Sass入门：第二章

1.Sass语法格式

假设有这样一段CSS代码：

body{
    font : 100% Helvetica , sans-serif;
    color : #333;
}

Sass最初的语法格式

$font-stack : Helvetica , sans-serif
$primary-color : #333

body
    font : 100% $font-stack
    color : $primary-color

这种语法格式没有CSS中常见的大括号和分号，容易出错。

而SCSS的语法格式

$font-stack : Helvetica , sans-serif;
$primary-color : #333;

body{
    font : 100% $font-stack;
    color : $primary-color;
}

SCSS比Sass更接近CSS。

2.Sass编译

使用Sass进行开发，项目中还是引用".css"文件，Sass只是一个预处理工具，只有在需要的时候，才有效。

　　Sass编译有多种方法：

　　?命令编译

　　?GUI工具编译

　　?自动化编译

3.命令编译

　　指使用电脑中的命令终端，通过输入Sass指令来编译Sass。这种编译方式是最直接也是最简单的一种。

　　?单文件编译：

sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

　　?多文件编译：

sass sass/:css/

　　上面的命令表示将项目中"sass"文件夹中所有".scss"文件编译成".css"文件，并且将这些CSS文件都放在项目中"css"文件夹中。

　　?缺点

　　在实际的编译过程中，上面的命令只能一次性编译。每次保存".scss"文件之后，都要重新执行一次这样的命令。解决的方法是在编译Sass时，开启"watch"功能，这样只要你的代码进行任何修改都能自动监听到代码的变化，并且编译出来。

sass --watch <要编译的Sass文件路径> / style.scss : <要输出的CSS文件路径> / style.css

例如：假设要把项目中的"bootstrap.scss"编译出"bootstrap.css"文件，并且将编译出来的文件放在"css"文件夹中，可以在命令终端中执行:

sass --watch
sass / bootstrap.scss : css / bootstrap.css

　　一旦bootstrap.scss文件有任何修改，只要重新保存了修改的文件，命令终端就能监听。

4.GUI界面工具编译

对于 GUI 界面编译工具，目前较为流行的主要有：

　　?Koala (http://koala-app.com/)
　　?Compass.app（http://compass.kkbox.com/）
　　?Scout（http://mhs.github.io/scout-app/）
　　?CodeKit（https://incident57.com/codekit/index.html）
　　?Prepros（https://prepros.io/）
相比之下，推荐使用以下两个：

　　?Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)
　   ?CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)

5.自动化编译

　　?Grunt配置Sass编译的示例代码

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON(‘package.json‘),
        sass: {
            dist: {
                files: {
                    ‘style/style.css‘ : ‘sass/style.scss‘
                }
            }
        },
        watch: {
            css: {
                files: ‘**/*.scss‘,
                tasks: [‘sass‘]
            }
        }
    });
    grunt.loadNpmTasks(‘grunt-contrib-sass‘);
    grunt.loadNpmTasks(‘grunt-contrib-watch‘);
    grunt.registerTask(‘default‘,[‘watch‘]);
}　　

　　?Gulp 配置 Sass 编译的示例代码

var gulp = require(‘gulp‘);
var sass = require(‘gulp-sass‘);

gulp.task(‘sass‘, function () {
    gulp.src(‘./scss/*.scss‘)
        .pipe(sass())
        .pipe(gulp.dest(‘./css‘));
});

gulp.task(‘watch‘, function() {
    gulp.watch(‘scss/*.scss‘, [‘sass‘]);
});

gulp.task(‘default‘, [‘sass‘,‘watch‘]);

6.常见编译错误

　　?字符编译错误：在Sass编译的过程中，需要将文件编码设置为"utf-8".

　　?路径中午字符错误：建议在项目中文件命名或者文件目录命名不要使用中文字符。

7.不同风格样式输出

　　Sass中编译的风格主要包括以下几种：

　　?嵌套输出方式 nested

　　?展开输出方式 expanded

　　?紧凑输出方式 compact

　　?压缩输出方式 compressed

例如：　

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

(1)嵌套输出方式 nested

　　在编译的时候带上参数 " --style nested ":

sass --watch test.scss:test.css --style nested

　　编译出来的CSS样式风格：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }
nav li {
  display: inline-block; }
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }

(2)展开输出方式 expanded:

　　在编译的时候带上参数 " --style expanded":

sass --watch test.scss:test.css --style expanded

　　编译出来的CSS样式风格：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

这个输出的CSS样式风格和nested类似，只是大括号另起一行。

(3)紧凑输出方式 compact：

　　在编译的时候带上参数 " --style compact ":

sass --watch test.scss:test.css --style compact

　　编译后的CSS样式：

nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }

适合喜欢单行CSS样式格式的朋友。

(4)压缩输出方式 compressed

　　在编译的时候带上参数 " --style compressed ":

sass --watch test.scss:test.css --style compressed

　　编译出来的CSS样式风格：

nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}

压缩输出方式会去掉标准的Sass和CSS注释以及空格。

9.Sass调试

　　只要浏览器支持 "sourcemap" 功能就可以直接在浏览器中调试Sass文件。早一点的版本，需要在编译的时候添加 " --sourcemap "参数：

sass --watch --scss --sourcemap
style.scss : style.css

在Sass3.3版本之上，不需要添加这个参数：

sass --watch style.scss : style.css

在命令终端，你将看到一个信息：

>>> Change detected to: style.scss
write style.css
write style.css.map

就可以直接在浏览器调试Sass文件。

时间： 2024-11-10 11:53:58

Sass入门：第二章的相关文章

《ECMAScript 6 入门- 第二章 变量的解构赋值》 —— 摘抄

1.数组的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 旧做法: var a = 1; var b = 2; var c = 3; ES6做法: var [a,b,c] = [1,2,3]; 上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值. 本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值.下面是一些使用嵌套数组进行解构的例子. var [foo,[[bar],bad]] =

[算法竞赛入门]第二章_循环结构程序设计

第2章 循环结构程序设计 [学习内容相关章节] 2.1for循环 2.2循环结构程序设计 2.3文件操作 2.4小结与习题 [学习目标] (1)掌握for循环的使用方法: (2)掌握while循环的使用方法: (3)学会使用计算器和累加器: (4)学会用输出中间结果的方法调试: (5)学会用计时函数测试程序效率: (6)学会用重定向的方式读写文件: (7)学会fopen的方式读写文件: (8)了解算法竞赛对文件读写方式和命名的严格性: (9)记住变量在赋值之前的值是不确定的: (10)学会使用条

MDN——javascript——入门——第二章——知识点总结

If else Switch 三元运算符 (condition) ? run this code : run this code instead For循环 Break跳出循环 Continue跳出当前循环,继续下一循环 函数:重用代码块 匿名函数 1与事件绑定(匿名函数的主要作用) 2指定其为变量值(var a = function(){})但是最好不要用这种方式,最好的还是function a (){} 作用域与冲突 函数内定义的变量只在函数内起作用,即作用域是函数 思考创建函数库的想法.随

JAVA 入门第二章 （面对对象）

本渣渣鸽了一个月终于有时间更新.因为有c++基础,学起来这章还是比较简单的,本章我觉得是程序猿质变课程,理解面向对象的思想,掌握面向对象的基本原则以及 Java 面向对象编程基本实现原理,熟练使用封装.继承.多态面向对象三大特性,感受和c++之间的异同,下面是学习路线. 1.类和对象  1-1 什么是类和对象 1-2 如何定义 Java 中的类 1-3 如何使用 Java 中的对象 1-4 Java 中的成员变量和局部变量 1-5 Java 中的构造方法 1-6 Java 中的 static 使

python语言入门--第二章 类型与操作符

2.1 Python程序结构 Python 可分为模块.语句和对象,程序是由模块组成,模块包含语句,语句生成.处理对象. 2.2 为什么使用内置对象 往往比自己定制的数据结构更有效. 2.3 数字 Python的长整数型(后面跟L或l)可以任意长,可以扩展到内存不允许为止. 普通的整数的精度与C的长整数型一样(至少32位). 八进制和十六进制和C一样,八,0:十六,0x or 0X 复数,实数+虚数J(j),如3+4J Python 特有的部分操作符 x  or y     (只有x为假时,y才

Java入门第二章

标识符:声明所谓类名.变量名等等. 规则: 可以用字母.数字.下划线_和美元符号$组成: 不能以数字开头: 不能使用Java关键字: 要有意义: 类名首字母大写: 用驼峰命名法(例如:JavaScore) . 定义变量的两种方法:     数据类型 1.变量名 = 数值 声明变量的同时给变量命名     数据类型     变量名    2.变量名 = 数值 先声明变量,后面再根据需求给变量赋值 什么是变量? 例如: 住酒店                     酒店房间就是变量 房间号    

ES6标准入门 第二章：块级作用域 以及 let和const命令

一.块级作用域 1.为什么需要块级作用域? ES5中只有全局作用域和函数作用域,带来很多不合理的场景. (1)内层变量可能会覆盖外层变量: var tem = new Date(); function f(){ console.log(tmp); if(false) { var tmp = "hello world"; } } f(); //undefined 变量提升导致了外层的内层的tmp变量覆盖了外层的tmp变量. (2)用来计数的循环变量泄露为全局变量: var s = &qu

C++ Primer Plus学习：第二章

C++入门第二章:开始学习C++ 进入C++ 首先,以下是一个C++程序: //myfirst.cpp 显示一行文字 #include<iostream> //预处理器编译指令 int main() //函数头 { using namespace std; //编译指令 cout<<"学习C++"; //显示消息 cout<<endl; //开始下一行 cout<<"你不会后悔!"; //更多输出 return 0;

ArcGIS for Desktop入门教程_第二章_Desktop简介 - ArcGIS知乎-新一代ArcGIS问答社区

原文:ArcGIS for Desktop入门教程_第二章_Desktop简介 - ArcGIS知乎-新一代ArcGIS问答社区 1 Desktop简介 1.1 ArcGIS for Desktop ArcGIS for Desktop是ArcGIS产品线上的桌面端软件产品,为GIS专业人士提供的信息制作和使用的工具.利用ArcGIS for Desktop,你可以实现任何从简单到复杂的GIS任务,包括制图,地理分析,数据编辑,数据管理,可视化和空间处理等.它可以作为三个独立的软件产品购买,每个

第二章 算法入门 合并排序

在第二章中难的算法不多,接下来我会把稍微复杂一点的算法整理一下 #include <iostream> using namespace std; void mergeSort(int *A,int left,int mid,int right) { int *L=new int[mid-left+1]; int *R=new int[right-mid+1]; int i,j; for(i=0;i<mid-left+1;i++) { L[i]=A[left+i]; } for (j=0;