1、SCSSSass

SassSCSS 其实是同一种东西,我们平时都称之为 Sass他们都是用Ruby开发Css预处理器,boostrap4已经将less换成了sass

不同之处:

  • 文件拓展名:分别是sassscss
  • 缩进:sass严格缩进(类似python和ruby),scss是css的缩进样式
  • 是否兼容css语法:显然,由于缩进的不同,scss是兼容原生的css写法。

总的来说,scsssass升级版,兼容css语法,并且有着自己的独立语法。

2、环境配置

  1. 安装ruby:windows注意添加注册表路径
  2. 安装sass:利用ruby的包管理器gem安装,命令行运行:gem install sass
  3. 升级和删除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:配置与运行的更多相关文章

  1. webpack学习(二)初识打包配置

    前言:webpack打包工具让整个项目的不同文件夹相互关联,遵循我们想要的规则.想 .vue文件, .scss文件浏览器并不认识,因此webpage暗中做了很多转译,编译等工作. 事实上,如果我们在没 ...

  2. AgileEAS.NET SOA 中间件平台5.2版本下载、配置学习(三):配置ActiveXForm运行环境

    一.前言 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市 ...

  3. idea sass scss配置

    1.安装Ruby win  直接http://rj.baidu.com/soft/detail/22711.html?ald mac linux https://ruby.taobao.org/ 可下 ...

  4. Editplus配置java运行环境

    Editplus配置java运行环境 下载及安装: editplus官网下载地址:https://www.editplus.com/ 安装方法和安装普通exe应用程序一样,选在安装路径,下一步下一步, ...

  5. mysql5.6.16绿色版配置、运行

    原文:mysql5.6.16绿色版配置.运行 1.从该地址http://dev.mysql.com/downloads/mysql/中选择windows的版本,选择下载. 2.将下载的压缩包解压. 3 ...

  6. LNMP1.3一键安装Linux环境,配置Nginx运行ThinkPHP3.2

    LNMP1.3一键安装Linux环境,配置Nginx运行ThinkPHP3.2 你是否遇见过:安装LNMP1.3环境后,运行ThinkPHP 3.2,只能打开首页,不能访问控制器,报404错误. 按照 ...

  7. 【Java SE】如何安装JDK以及配置Java运行环境

    摘要:不管是作为苦逼的Java码农,还是高端大气的Java系统架构师,如果不会安装JDK以及配置Java运行环境,那就巧妇难为无米之炊,不能进行Java后续的代码编写.当然如果你是Myeclipse编 ...

  8. 在Linux(Centos7)系统上对进行Hadoop分布式配置以及运行Hadoop伪分布式实例

    在Linux(Centos7)系统上对进行Hadoop分布式配置以及运行Hadoop伪分布式实例                                                     ...

  9. Windows2016的 IIS中配置PHP7运行环境

    Windows2016的 IIS中配置PHP7运行环境 在Windows 的IIS(8.0)中搭建PHP运行环境: 一:安装IIS服务器 .进入控制面板>>程序和功能>>打开或 ...

  10. Sublime Text3配置Lua运行环境

    Sublime Text3配置Lua运行环境 前言 要问现在哪个编译器最能扛得住潮流,要数Sublime Text3了,由于它的轻量,插件丰富,美观,造就了一大批粉丝(本菜鸡也是哦) 在以前的工作中使 ...

随机推荐

  1. 解决eclipse运行内存溢出方案

    1.在工具栏找到Window -> Preference 2.双击选择的jdk 3.在VM输入以下设置运行的内存的大小即可(具体内存大小可以根据项目进行设置) -Xms800m -Xmx800m ...

  2. PowerBuilder常用字符串函数

    http://blog.sina.com.cn/s/blog_5995b53d0100a694.html Fill()功能建立一个由指定字符串填充的指定长度的字符串.语法Fill ( chars, n ...

  3. 3.装配Bean 基于XML

    一.实例化方式 3种bean实例化方式:默认构造.静态工厂.实例工厂 1.默认构造 <bean id="" class=""> 必须提供默认构造 2 ...

  4. 使用MSF打造各种ShellCode

    MSF 生成各种后门 Windows: 生成Windows后门. msfvenom -a x86 --platform Windows -p windows/meterpreter/reverse_t ...

  5. Mac 视频录制然后转 gif

    https://gist.github.com/dergachev/4627207 用 ScreenShot 或 Quicktime Player 录制视频, 保存位 in.mov ffmpeg -i ...

  6. bootstrap使用之多个弹窗和拖动效果[开发篇]

    有时开发一些特效,自己感觉挺爽的,像操作自己电脑一样操作你的网页,这里就介绍一个使用bootstrap的一点多窗口和拖动效果吧! 这里,我们不使用静态打开的的方式,low...,1.添加一个a链接 触 ...

  7. Linux链接脚本学习--lds

    一.概论 ld: GNU的链接器. 用来把一定量的目标文件跟档案文件链接在一起,并重新定位它们的数据,链接符号引用. 一般编译一个程序时,最后一步就是运行ld进行链接 每一个链接都被一个链接脚本所控制 ...

  8. python多线程获取子线程任务返回值

    今天想实现多线程更新资产信息,所以使用到了threading,但是我需要每个线程的返回值,这就需要我在threading.Thread的基础上进行封装 def auto_asset(node): re ...

  9. java面试题:当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?

    答:是值传递.Java编程语言只有值传递参数. 当一个对象实例作为一个参数被传递到方法中时,参数的值就是该对象的引用一个副本.指向同一个对象,对象的内容可以在被调用的方法中改变,但对象的引用(不是引用 ...

  10. 【深入 MongoDB 开发】使用正确的姿势连接分片集群

    MongoDB分片集群(Sharded Cluster)通过将数据分散存储到多个分片(Shard)上,来实现高可扩展性.实现分片集群时,MongoDB 引入 Config Server 来存储集群的元 ...