一、sass和scss

sass最初是为了配合haml设计的,不需要大括号,用tab缩进

从第三代开始,保留缩进风格,完全向下兼容普通的css代码

二、下载配置sass

compass是sass的一个工具库

安装compass和sass都需要Ruby

1.下载Ruby

2.安装

3.安装compass和sass

4.在vscode安装自动变异sass文件的插件→Esay Sass

在插件的json中配置如下

    "easysass.compileAfterSave": true,
"easysass.formats": [ //nested:嵌套缩进的 css 代码。
//expanded:没有缩进的、扩展的css代码。
//compact:简洁格式的 css 代码。
//compressed:压缩后的 css 代码
{
"format": "compressed:压缩后的",
"extension": ".css"
},
{
"format": "compressed",
"extension": ".min.css"
}
],
"easysass.targetDir": "./" //表示当前路径

三、sass语法

1.sass转为css的类型

09-sass的更多相关文章

  1. Ionic3 遇到的一些错误-submodule update -q --init --recursive

    解决方法: ionic start myTabs tabs --skip-deps cd .\myTabs cnpm install --save-dev ionic serve > npm i ...

  2. Windows7WithSP1/TeamFoundationServer2012update4/SQLServer2012

    [Info   @09:03:33.737] ====================================================================[Info   @ ...

  3. Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探

    用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了,得好好整理一些,下次换电脑就有得参考了.. 同事说,他的WebStorm简直太方便,自身集成了很多方 ...

  4. Sass的基本运算(转载)

    转载于:http://www.cnblogs.com/Medeor/p/4966952.html Sass中的基本运算 一.加法 在 CSS 中能做运算的,到目前为止仅有 calc() 函数可行.但在 ...

  5. Sass运算

    加法在 CSS 中能做运算的,到目前为止仅有 calc() 函数可行.在 Sass 中,运算只是其基本特性之一.在 Sass 中可以做各种数学计算.加法运算是 Sass 中运算中的一种,在变量或属性中 ...

  6. Sass入门:第四章

    1.加法 加法运算是Sass中运算的一种,在变量或属性中都可以做加法运算.如: .box { width: 20px + 8in; } 编译出来的CSS: .box { width: 788px; } ...

  7. Brackets + Sass 学习心得

    大家知道Brackets是一个可以实时浏览html页面修改效果的工具,对于前段开发人员应该不会陌生,有了它,布局页面再也不是什么困难了, 目前为止已经更新到1.6了. 下载最新版可以到官方网: htt ...

  8. Sass控制命令及函数知识整理

    2017-07-07  20:17:17 最底部附结构图(实在是结构图太长了没办法) 2017-06-22  09:11:43 一.Sass的控制命令 1.@if语句 @if 指令是一个 SassSc ...

  9. 菜鸟的 Sass 学习笔记

    介绍 sass 是什么?? 在sass的官网,它是这么形容给自己的 Sass is the most mature, stable, and powerful professional grade C ...

  10. sublimeText3 中配置sass环境,并将编译后文件保存到指定文件夹

    sass基于ruby引擎,所以安装时ass.compass之前需要安装ruby.具体的链接应该是(http://rubyinstaller.org/downloads).下载并安装相应的版本,勾选第二 ...

随机推荐

  1. 图数据库 Nebula Graph TTL 特性

    导读 身处在现在这个大数据时代,我们处理的数据量需以 TB.PB, 甚至 EB 来计算,怎么处理庞大的数据集是从事数据库领域人员的共同问题.解决这个问题的核心在于,数据库中存储的数据是否都是有效的.有 ...

  2. Android开发:通过 webview 将网页打包成安卓应用

    商业转载请联系作者获得授权,非商业转载请注明出处. For commercial use, please contact the author for authorization. For non-c ...

  3. JDK环境的配置,及运用

    JAVA为什么可以跨平台 1.JDK配置环境变量 步骤:打开控制面板中系统和安全------系统-----找到高级系统设置点击属性------高级----环境变量------系统变量(JAVA_HOM ...

  4. Happens-before先行发生原则

    简介 从JDK1.5,java使用新的JSR-133内存模型:JSR-133使用happens-before的概念来阐述操作之间的内存可见性:在JMM中,如果一个操作执行的结果需要对另一个操作可见,那 ...

  5. Angular2入门(一)

    原先用vue.js写的项目,最近领导要求改用Angular,于是开始自学之路.网上搜索了众多资料,包括谷歌原版书籍,但是Angular自从17年开始分为AngularJs和Angular两个版本,相差 ...

  6. Oracle设置和修改system和scott的口令,并且如何连接到system和scott模式下

    1.在Oracle数据库中,有个示例模式scott和系统模式system. 2.在安装数据库时只是设置了system的口令,即密码,如果忘记的话可以使用如下办法,首先打开sqlplus工具或者cmd命 ...

  7. 洛谷 P3909 异或之积 题解

    原题链接 本人看了其它解法,发现本人的解法还是 首创 ! 而且我的解法好像和 \(\times 6\) 没什么关系 -- (如果没 \(\times 6\),我没还不用算逆元) 别人的思路呢,大都是从 ...

  8. 贪心-谷歌-857. 雇佣 K 名工人的最低成本

    2020-03-15 22:00:39 问题描述: 有 N 名工人. 第 i 名工人的工作质量为 quality[i] ,其最低期望工资为 wage[i] . 现在我们想雇佣 K 名工人组成一个工资组 ...

  9. 主从校验工具pt-table-checksum和pt-table-sync工作原理

    pt-table-checksum和pt-table-sync是常用来做MySQL主从数据一致性校验的工具,pt-table-checksum只校验数据,不能对数据进行同步:pt-table-sync ...

  10. 了解1D和3D卷积神经网络 | Keras

    当我们说卷积神经网络(CNN)时,通常是指用于图像分类的2维CNN.但是,现实世界中还使用了其他两种类型的卷积神经网络,即1维CNN和3维CNN.在本指南中,我们将介绍1D和3D CNN及其在现实世界 ...