初识scss:配置与运行
1、SCSS
和Sass
Sass
和SCSS
其实是同一种东西,我们平时都称之为Sass
。他们都是用Ruby
开发Css预处理器,boostrap4
已经将less
换成了sass
。
不同之处:
- 文件拓展名:分别是
sass
和scss
- 缩进:
sass
严格缩进(类似python和ruby),scss
是css的缩进样式 - 是否兼容css语法:显然,由于缩进的不同,
scss
是兼容原生的css写法。
总的来说,scss
是sass
升级版,兼容css语法,并且有着自己的独立语法。
2、环境配置
- 安装ruby:windows注意添加注册表路径
- 安装sass:利用ruby的包管理器
gem
安装,命令行运行:gem install sass
- 升级和删除sass:
gem update/uninstall sass
如果国外源过慢?
gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/
gem sources -l #查看是不是淘宝源
3、编译
编译指的是:将scss文件编译为css文件的过程。
3.1 源文件编译
单文件编译
# 格式:sass 待编译的Sass文件名:编译后CSS文件名
scss scss.scss:css.css
实时自动编译
使用--watch
参数即可,scss会在源文件改动时候,自动重新编译。
scss --watch scss.scss:css.css # 方便
3.2 输出文件风格
命令行编译时候,使用
--style
参数。
一段scss代码:
body {
h1 {
color : red;
}
}
默认:嵌套输出方式 nested
body h1 {
color: red; }
展开输出方式 expanded
body h1 {
color: red;
}
紧凑输出方式 compact
body h1 { color: red; }
压缩输出方式 compressed
body h1{color:red}
4. 注意
最新的scss开启了
sourcemap
功能,--sourcemap
参数默认添加。
欢迎技术交流,引用请注明出处。
个人网站:godbmw.com
Github:godbmw
初识scss:配置与运行的更多相关文章
- webpack学习(二)初识打包配置
前言:webpack打包工具让整个项目的不同文件夹相互关联,遵循我们想要的规则.想 .vue文件, .scss文件浏览器并不认识,因此webpage暗中做了很多转译,编译等工作. 事实上,如果我们在没 ...
- AgileEAS.NET SOA 中间件平台5.2版本下载、配置学习(三):配置ActiveXForm运行环境
一.前言 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市 ...
- idea sass scss配置
1.安装Ruby win 直接http://rj.baidu.com/soft/detail/22711.html?ald mac linux https://ruby.taobao.org/ 可下 ...
- Editplus配置java运行环境
Editplus配置java运行环境 下载及安装: editplus官网下载地址:https://www.editplus.com/ 安装方法和安装普通exe应用程序一样,选在安装路径,下一步下一步, ...
- mysql5.6.16绿色版配置、运行
原文:mysql5.6.16绿色版配置.运行 1.从该地址http://dev.mysql.com/downloads/mysql/中选择windows的版本,选择下载. 2.将下载的压缩包解压. 3 ...
- LNMP1.3一键安装Linux环境,配置Nginx运行ThinkPHP3.2
LNMP1.3一键安装Linux环境,配置Nginx运行ThinkPHP3.2 你是否遇见过:安装LNMP1.3环境后,运行ThinkPHP 3.2,只能打开首页,不能访问控制器,报404错误. 按照 ...
- 【Java SE】如何安装JDK以及配置Java运行环境
摘要:不管是作为苦逼的Java码农,还是高端大气的Java系统架构师,如果不会安装JDK以及配置Java运行环境,那就巧妇难为无米之炊,不能进行Java后续的代码编写.当然如果你是Myeclipse编 ...
- 在Linux(Centos7)系统上对进行Hadoop分布式配置以及运行Hadoop伪分布式实例
在Linux(Centos7)系统上对进行Hadoop分布式配置以及运行Hadoop伪分布式实例 ...
- Windows2016的 IIS中配置PHP7运行环境
Windows2016的 IIS中配置PHP7运行环境 在Windows 的IIS(8.0)中搭建PHP运行环境: 一:安装IIS服务器 .进入控制面板>>程序和功能>>打开或 ...
- Sublime Text3配置Lua运行环境
Sublime Text3配置Lua运行环境 前言 要问现在哪个编译器最能扛得住潮流,要数Sublime Text3了,由于它的轻量,插件丰富,美观,造就了一大批粉丝(本菜鸡也是哦) 在以前的工作中使 ...
随机推荐
- 解决eclipse运行内存溢出方案
1.在工具栏找到Window -> Preference 2.双击选择的jdk 3.在VM输入以下设置运行的内存的大小即可(具体内存大小可以根据项目进行设置) -Xms800m -Xmx800m ...
- PowerBuilder常用字符串函数
http://blog.sina.com.cn/s/blog_5995b53d0100a694.html Fill()功能建立一个由指定字符串填充的指定长度的字符串.语法Fill ( chars, n ...
- 3.装配Bean 基于XML
一.实例化方式 3种bean实例化方式:默认构造.静态工厂.实例工厂 1.默认构造 <bean id="" class=""> 必须提供默认构造 2 ...
- 使用MSF打造各种ShellCode
MSF 生成各种后门 Windows: 生成Windows后门. msfvenom -a x86 --platform Windows -p windows/meterpreter/reverse_t ...
- Mac 视频录制然后转 gif
https://gist.github.com/dergachev/4627207 用 ScreenShot 或 Quicktime Player 录制视频, 保存位 in.mov ffmpeg -i ...
- bootstrap使用之多个弹窗和拖动效果[开发篇]
有时开发一些特效,自己感觉挺爽的,像操作自己电脑一样操作你的网页,这里就介绍一个使用bootstrap的一点多窗口和拖动效果吧! 这里,我们不使用静态打开的的方式,low...,1.添加一个a链接 触 ...
- Linux链接脚本学习--lds
一.概论 ld: GNU的链接器. 用来把一定量的目标文件跟档案文件链接在一起,并重新定位它们的数据,链接符号引用. 一般编译一个程序时,最后一步就是运行ld进行链接 每一个链接都被一个链接脚本所控制 ...
- python多线程获取子线程任务返回值
今天想实现多线程更新资产信息,所以使用到了threading,但是我需要每个线程的返回值,这就需要我在threading.Thread的基础上进行封装 def auto_asset(node): re ...
- java面试题:当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
答:是值传递.Java编程语言只有值传递参数. 当一个对象实例作为一个参数被传递到方法中时,参数的值就是该对象的引用一个副本.指向同一个对象,对象的内容可以在被调用的方法中改变,但对象的引用(不是引用 ...
- 【深入 MongoDB 开发】使用正确的姿势连接分片集群
MongoDB分片集群(Sharded Cluster)通过将数据分散存储到多个分片(Shard)上,来实现高可扩展性.实现分片集群时,MongoDB 引入 Config Server 来存储集群的元 ...