如何使用scss/sass
SCSS 与 Sass 异同:http://sass.bootcss.com/docs/scss-for-sass-users/;
废话不多说,直接进入正题;
安装Sass和Compass
sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby。(注:mac下自带Ruby无需在安装Ruby!)
window下安装SASS首先需要安装Ruby,先从官网下载Ruby并安装。安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。如下图:
安装完成后需测试安装有没有成功,运行CMD输入以下命令:
ruby -v//如安装成功会打印 ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]
如上已经安装成功。但因为国内网络的问题导致gem源间歇性中断因此我们需要更换gem源。(使用淘宝的gem源https://ruby.taobao.org/)如下:
//1.删除原gem源 gem sources --remove https://rubygems.org///2.添加国内淘宝源 gem sources -a https://ruby.taobao.org///3.打印是否替换成功 gem sources -l//4.更换成功后打印如下*** CURRENT SOURCES ***https://ruby.taobao.org/
Ruby自带一个叫做RubyGems的系统,用来安装基于Ruby的软件。我们可以使用这个系统来 轻松地安装Sass和Compass。要安装最新版本的Sass和Compass,你需要输入下面的命令:
//安装如下(如mac安装遇到权限问题需加 sudo gem install sass) gem install sassgem install compass
在每一个安装过程中,你都会看到如下输出:
Fetching: sass-3.x.x.gem (100%)Successfully installed sass-3.x.xParsing documentation for sass-3.x.xInstalling ri documentation for sass-3.x.xDone installing documentation for sass after 6 secon1 gem installed
安装完成之后,你应该通过运行下面的命令来确认应用已经正确地安装到了电脑中:
sass -vSass 3.x.x (Selective Steve)compass -vCompass 1.x.x (Polaris)Copyright (c) 2008-2015 Chris EppsteinReleased under the MIT License.Compass is charityware.Please make a tax deductable donation for a worthy cause: http://umdf.org/compass
如下sass常用更新、查看版本、sass命令帮助等命令:
//更新sass gem update sass//查看sass版本 sass -v//查看sass帮助 sass -h
编译sass
sass编译有很多种方式,如命令行编译模式、sublime插件SASS-Build、编译软件koala、前端自动化软件codekit、Grunt打造前端自动化工作流grunt-sass、Gulp打造前端自动化工作流gulp-ruby-sass等。
新建一个input.scss的文件里面写入scss语句==>比如我要转换为output.css==>执行sass input.scss output.css
命令行编译
//单文件转换命令 sass input.scss output.css//单文件监听命令 sass --watch input.scss:output.css//如果你有很多的sass文件的目录,你也可以告诉sass监听整个目录: sass --watch app/sass:public/stylesheets
命令行编译配置选项;
命令行编译sass有配置选项,如编译过后css排版、生成调试map、开启debug信息等,可通过使用命令sass -v查看详细。我们一般常用两种--style``--sourcemap。
//编译格式 sass --watch input.scss:output.css --style compact//编译添加调试map sass --watch input.scss:output.css --sourcemap//选择编译格式并添加调试map sass --watch input.scss:output.css --style expanded --sourcemap//开启debug信息 sass --watch input.scss:output.css --debug-info
- --style表示解析后的css是什么排版格式;
sass内置有四种编译格式:nested``expanded``compact``compressed。 - --sourcemap表示开启sourcemap调试。开启sourcemap调试后,会生成一个后缀名为.css.map文件。
四种编译排版演示:
//未编译样式 .box {width: 300px;height: 400px;&-title {height: 30px;line-height: 30px;}}
1.nested 编译排版格式
/*命令行内容*/sass style.scss:style.css --style nested/*编译过后样式*/.box {width: 300px;height: 400px; }.box-title {height: 30px;line-height: 30px; }
2.expanded 编译排版格式
/*命令行内容*/sass style.scss:style.css --style expanded/*编译过后样式*/.box {width: 300px;height: 400px;}.box-title {height: 30px;line-height: 30px;}
3.compact 编译排版格式
/*命令行内容*/sass style.scss:style.css --style compact/*编译过后样式*/.box { width: 300px; height: 400px; }.box-title { height: 30px; line-height: 30px; }
4.compressed 编译排版格式
/*命令行内容*/sass style.scss:style.css --style compressed/*编译过后样式*/.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}
转载于:https://www.cnblogs.com/wangzhichao/p/9013258.html
如何使用scss/sass相关推荐
- 如何在 vue-cli v3.0 中使用 SCSS/SASS
在项目中使用 SCSS/SASS 进行样式编写无疑会节省很多开发样式的时间.关于如何在 vue-cli v3.0 中使用 SCSS/SASS,这里提供三种方案.前提是在使用 vue-cli 生成项目时 ...
- 【HBuilderX】预编译器错误:代码使用了scss/sass语言,但未安装相应的编译器插件,请前往插件市场安装该插件:
[HBuilderX]预编译器错误:代码使用了scss/sass语言,但未安装相应的编译器插件,请前往插件市场安装该插件: 一.报错 二.报错原因 三.解决办法 一.报错 预编译器错误:代码使用了sc ...
- uni-app 预编译器错误:代码使用了scss/sass语言,但未安装相应的编译器插件,请前往插件市场安装该插件
一.报错截图 二.报错原因 导致出现上述现象的原因是未安装相关编译器. 三.解决办法 打开HBuilderX,点击工具选项,然后点击插件安装 进入插件安装界面,点击"安装新插件", ...
- uni-app 报错:代码使用了scss/sass语言,但未安装相应的编译器插件,请前往插件市场安装该插件
报错如下: 解决方法: 1.[工具]>[插件安装] 2.前往插件市场,安装缺失的scss/sass插件 3.进入下载页,点击[使用HBuilderX导入插件]
- HBuilderX 安装 scss/sass编译 插件报错 binding.node 解决方案windows版
HBuilderX 安装 scss/sass编译 插件报错 binding.node 解决方案windows版 官方给出的解决方案 让我们在命令行执行下面三行代码 [0;31m--> LibSa ...
- SCSS/SASS(上)
目录 介绍 SCSS编译 命令编译 常见的编译错误解决方案 不同样式风格的输出方法 嵌套输出方式 nested 展开输出方式 expanded 紧凑输出方式 compact 压缩输出方式 compre ...
- .scss 转为 .css,Windows 下将 scss/sass 转换为 css
有时需要将 scss 或 sass 文件转换为 css,搜索到了方法,这里记录下具体操作步骤. 一.下载安装 RubyInstaller 工欲善其事必先利其器,这里需要用到的工具为 RubyInsta ...
- SCSS SASS Color 颜色函数用法
最近做一个没有设计师参与的项目,发现 scss 内置的颜色函数还挺好用.记录分享下 rgba() 能省掉手工转换 hex 到 rgb 格式的工作,如以下 SCSS 代码 $linkColor: #20 ...
- SASS 和 SCSS 的区别
原文 Difference Between SASS and SCSS SASS(Syntactically Awesome Style Sheets)是一种由 Hampton Catlin 设计.C ...
最新文章
- siamese网络_CVPR 2019手写签名认证的逆鉴别网络
- tensor_proto.raw_data().empty() || !tensor_proto.float_data().empty() || !tensor_proto.double_data()
- d3中文案例_D3.js柱状图例子
- MySQL使用on duplicate key update时导致主键不连续自增
- 江西住建云实名认证怎么弄_王者荣耀无限时间怎么弄 2020年无限时间账号
- [编程启蒙游戏] 1. 猜数字
- Android--关闭某个指定activity,android开发游戏
- pdf合并 java_用Java拆分及合并PDF文档
- 自动化测试 之连连看外挂项目实战
- ListView中如何优化图片
- 初中物理60个重要知识点
- php上传pdf文件错误,php上传pdf文件,一些特殊字符丢失
- 计算机专业cad 办公 ps,厦门集美办公、商务办公、CAD、PS、平面设计培训
- 利用NI模拟量输出板卡LabVIEW输出正弦波形的方法
- Excle数据透视表学习大纲
- Hexo Next主题添加百度统计
- 北京法院京牌小客车司法处置数据统计(Pandas)
- [转]脑梗塞的诊治指南
- 硬件安全技术——概述3
- 如何设计标签系统?如果构建用户画像
热门文章
- CTSC2017酱油记
- SQL Server - SQL Server 2016新特性之 --- Query Store
- 大数据之-Hadoop3.x_MapReduce_序列化概述---大数据之hadoop3.x工作笔记0094
- Sharding-Proxy读写分离_Sharding-Sphere_分库分表_读写分离_工作笔记021
- Netty工作笔记0064---WebSocket长连接开发3
- Netty工作笔记0048---Http服务过滤资源
- SpringCloud学习笔记023---分布式集群之_Windows下搭建zookeeper服务器
- UI学习笔记---EasyUI panel插件使用---03
- vc 2010 下打包dll 的问题
- JAVA的节点流和处理流