sass是一种“css预处理器”,同类的还有less等,方法类似。css预处理器的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的css文件。

使用sass需要先暗转RUBY,再暗转sass。方法为安装ruby后,在命令行输入:
gem install sass,然后就可以使用了。

通过Node使用sass,可以安装sass的相关npm包。如:
node-sass(http://www.npmjs.com/package/node-sass),
gulp-sass(http://www.npmjs.com/package/gulp-sass).

sass文件后缀名为.scss或者.sass,scss的格式与css类似,使用分号和大括号,sass不使用这两个符号。
通常采用.scss后缀名,避免出错。
通过命令: sass test.scss 将.scss文件转化为css代码(test为文件名)。
保存显示的css代码的命令: sass test.scss test.css

sass提供四个编译风格的选项:
nested(嵌套缩进的css代码,默认值)
expanded(没有缩进的、扩展的css代码)
compact(简洁格式的css代码)
compressed(压缩后的css代码)
一般使用压缩后的,命令为: sass --style compressed test.scss test.css

sass监听文件或者目录,一旦源文件有变动,就自动生成编译后的版本。
sass --watch input.scss:output.css(监听文件)
sass --watch app/sass:public/stylesheets(监听目录)

sass初步认识1的更多相关文章

  1. sass初步认识3

    sass的混合器是对大段的样式代码进行命名,定义为混合器,以便被多次引用.混合器的格式为:“@mixin 样式名称{样式代码}”:调用混合器的格式为:“@include 样式名称”.例:@minin ...

  2. sass初步认识2

    sass可以使用变量,采用 $ 来进行变量声明,格式为: $highlight-color:#f90;(声明方式和css属性声明类似.使用的变量名可以更加语义化) 与js分为全局变量和局部变量类似,s ...

  3. CSS预处理器——Sass、LESS和Stylus实践

    CSS(Cascading Style Sheet)被译为级联样式表,做为一名前端从业人员来说,这个专业名词并不陌生,在行业中通常称之为“风格样式表(Style Sheet)”,它主要是用来进行网页风 ...

  4. vue-cli + sass 的正确打开方式

    关于在vue-cli搭建的项目中怎么配置sass,网上搜到的基本是这种答案: 但是我认为,直接将样式写在每个单文件的<style>里,是十分不明智的做法.且不说node-sass安装过程的 ...

  5. 初识css预处理器:Sass、LESS

    这篇文章是初步介绍css预处理的,详细学习请移步官网~ 什么是css预处理器 CSS 预处理器是一种语言, 通俗易懂的话来说就是“用一种专门的编程语言,进行 Web 页面样式编写,再通过编译器转化为正 ...

  6. sass、less是什么,如何使用?

    一个很好的介绍的SASS,LESS的区别的文档,值get 1.背景介绍 CSS 是一门非程序式语言,没有变量.函数.SCOPE(作用域),需要书写大量看似没有逻辑的代码,不方便维护及扩 展,不利于复用 ...

  7. nginx配置初步

    nginx配置初步 1,切换至nginx目录,找到配置文件目录 cd /etc/nginx/conf.d 2,拷贝一份conf文件 sudo cp default.conf head.conf 3,进 ...

  8. 前段集成解决方案grunt+yeoman初步认识

    1.什么是前段集成解决方案? 将前端研发领域中各种分散的技术元素集中在一起,并对常见的前端开发问题.不足.缺陷和需求,所提出的一种解决问题的方案 2.yeoman 应用的架构,模型!  相当于一个生成 ...

  9. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

随机推荐

  1. 读取plist

    - (NSArray *)imageData { if (_imageData == nil) { // 从未初始化 // 初始化数据 // File : 全路径 // NSBundle : 一个NS ...

  2. Java堆

    1. Java堆的内存是由操作系统分配给JVM的内存部分. 2. Java的对象是在堆中创建 3. Java堆空间为了垃圾回收分为三个区域或代,叫做新代,年老代和永久代.在Hotspot JVM中永久 ...

  3. mysql 插入重复值 INSERT ... ON DUPLICATE KEY UPDATE

    向数据库插入记录时,有时会有这种需求,当符合某种条件的数据存在时,去修改它,不存在时,则新增,也就是saveOrUpdate操作.这种控制可以放在业务层,也可以放在数据库层,大多数数据库都支持这种需求 ...

  4. Website English Comments

    幻灯新闻下方的广告 Slide news at the bottom of the advertisement 人才招聘 recruitment 左/右侧推荐区 The left/right side ...

  5. poj 1417(并查集+简单dp)

    True Liars Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 2087   Accepted: 640 Descrip ...

  6. [原创]java WEB学习笔记81:Hibernate学习之路--- 对象关系映射文件(.hbm.xml):hibernate-mapping 节点,class节点,id节点(主键生成策略),property节点,在hibernate 中 java类型 与sql类型之间的对应关系,Java 时间和日期类型的映射,Java 大对象类型 的 映射 (了解),映射组成关系

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  7. 每天一个liunx命令(ubuntu)

    解压XXX.gz到另一个A文化夹: 1.切换到root权限 su 2.tar -zxvf  XXX.gz -C  A 注意: C要大些因为ubuntu区分大小写

  8. Mysql存储过程总结

    1.     关于MySQL的存储过程 存储过程是数据库存储的一个重要的功能,但是MySQL在5.0以前并不支持存储过程,这使得MySQL在应用上大打折扣.好在MySQL 5.0终于开始已经支持存储过 ...

  9. 夺命雷公狗---node.js---1node的下载和安装

    node目前有两个网站,一个是英文的,一个是中文的,,左边这个是长期有效版本,右边的是最新版本,在下面可以很清晰的看得到node的英文网站更新速度是比中文网站上的快的多 我们用来测试的版本是windo ...

  10. PAT乙级 1031. 查验身份证(15) 标志要清零!!!!!!!!!

    1031. 查验身份证(15) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 一个合法的身份证号码由17位地区. ...