sass初步认识1
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的更多相关文章
- sass初步认识3
sass的混合器是对大段的样式代码进行命名,定义为混合器,以便被多次引用.混合器的格式为:“@mixin 样式名称{样式代码}”:调用混合器的格式为:“@include 样式名称”.例:@minin ...
- sass初步认识2
sass可以使用变量,采用 $ 来进行变量声明,格式为: $highlight-color:#f90;(声明方式和css属性声明类似.使用的变量名可以更加语义化) 与js分为全局变量和局部变量类似,s ...
- CSS预处理器——Sass、LESS和Stylus实践
CSS(Cascading Style Sheet)被译为级联样式表,做为一名前端从业人员来说,这个专业名词并不陌生,在行业中通常称之为“风格样式表(Style Sheet)”,它主要是用来进行网页风 ...
- vue-cli + sass 的正确打开方式
关于在vue-cli搭建的项目中怎么配置sass,网上搜到的基本是这种答案: 但是我认为,直接将样式写在每个单文件的<style>里,是十分不明智的做法.且不说node-sass安装过程的 ...
- 初识css预处理器:Sass、LESS
这篇文章是初步介绍css预处理的,详细学习请移步官网~ 什么是css预处理器 CSS 预处理器是一种语言, 通俗易懂的话来说就是“用一种专门的编程语言,进行 Web 页面样式编写,再通过编译器转化为正 ...
- sass、less是什么,如何使用?
一个很好的介绍的SASS,LESS的区别的文档,值get 1.背景介绍 CSS 是一门非程序式语言,没有变量.函数.SCOPE(作用域),需要书写大量看似没有逻辑的代码,不方便维护及扩 展,不利于复用 ...
- nginx配置初步
nginx配置初步 1,切换至nginx目录,找到配置文件目录 cd /etc/nginx/conf.d 2,拷贝一份conf文件 sudo cp default.conf head.conf 3,进 ...
- 前段集成解决方案grunt+yeoman初步认识
1.什么是前段集成解决方案? 将前端研发领域中各种分散的技术元素集中在一起,并对常见的前端开发问题.不足.缺陷和需求,所提出的一种解决问题的方案 2.yeoman 应用的架构,模型! 相当于一个生成 ...
- wepack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
随机推荐
- lua对模块接口扩展的一种方法
module lua中模块的实现,对于使用者来说就是一个库,引用此库后,可以调用库中实现的任意函数. 使用库,可以将一类功能相关的接口做封装,并提供开放接口. 参考: http://blog.codi ...
- 微软bing搜索搜索源码,可以直接运行
微软联合HackerRank一起研发了一项新功能:源代码搜索.能够直接搜索代码并且进行编译运行. 如果不做说明,这项功能看上去简直就是Visual Studio中源代码搜索插件的翻版,不过其并不需要本 ...
- 基于Qt Phonon模块实现音乐播放器
这次使用Qt实现的是一个本地音乐播放器,可以播放下载在计算机本地的音乐,提供了添加歌曲,歌曲列表,清空列表的功能.默认歌曲列表循环播放.音乐播放的实现主要依赖的是Qt 的多媒体框架phonon.该音乐 ...
- 算法训练 Torry的困惑(基本型)
http://lx.lanqiao.org/problem.page?gpid=T129 算法训练 Torry的困惑(基本型) 时间限制:1.0s 内存限制:512.0MB 问题描述 ...
- poj 题目分类(3)
OJ上的一些水题(可用来练手和增加自信) (poj3299,poj2159,poj2739,poj1083,poj2262,poj1503,poj3006,poj2255,poj3094) 初期: 一 ...
- [转]jQueryEasyUI Messager基本使用
一.jQueryEasyUI下载地址 http://www.jeasyui.com/ 二.jQueryEasyUI Messager基本使用 1.$.messager.alert(title, msg ...
- Ruby操作VBA的注意事项和技巧(1):乱码、获取VBA活动和非活动窗口的名称与路径、文件路径的智能拼接与截取(写入日期)
1.VBA编辑器复制粘贴出来的代码乱码 解决方法:切换到中文输入模式再复制出来就行了 2.获取VBA活动和非活动窗口的名称与路径 Dim wbpath, filename As String ...
- Calculation控制台
接口 using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace s ...
- RMAN基础知识补充
一.FORMAT字符串替代变量 使用FORMAT参数时可使用的各种替换变量,如下: %c :备份片的拷贝数(从1开始编号): %d :数据库名称: %D :位于该月中的天数 (DD): %M :位于该 ...
- 全志A20芯片用于启动的SD卡的布局
起始 大小 内容 0 8KB 存放分区表等 8 24KB SPL loader 32 512KB u-boot 544 128KB environment 672 352KB 保留 1024 - 用于 ...