html中将scss转编译为css,SASS把scss转化为css的四种转化方式与命令

在终端输入命令:

$ sass --watch scss:css --style expanded

即可实时把scss文件夹下的scss文件转化为css文件放入css文件夹中, 命令中使用的是expanded转化方式.

一共有四种转化方式##

未转化的代码

//未编译样式

.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}

html中将scss转编译为css,SASS把scss转化为css的四种转化方式与命令相关推荐

html之CSS设计（四种引入方式、各种选择器）
文章目录一.CSS简介二.四种引入方式三.CSS选择器四.练习代码本文主要介绍一下CSS的基本操作,四中引入方式和选择器.属性选择器的使用一.CSS简介 1.介绍: 也叫层叠样式表,用来控 ...
P21-前端基础-CSS颜色四种表示方式
P21-前端基础-CSS颜色四种表示方式 1.概述颜色单位: 在CSS中可以直接使用颜色名来设置各种颜色比如:red.orange.yellow.blue.green - - 但是在css中直接使 ...
外链引入css有哪些方式_CSS的四种引入方式
CSS 的引入方式最常用的有三种, 第一:在 head 部分加入 rel="stylesheet" type="text/css" href="my. ...
CSS的四种定位方式
CSS的四种定位方式 1.静态定位: 设置方式为position: static;静态定位的盒子是标准流状态,用于取消定位.静态定位的盒子处于网页的最底层,并且top.left.bottom.righ ...
简述css属性选择器的几种定义方式_css的四种使用方式 css规则按选择器类型分为那四种...
HTML中嵌入CSS的四种方式及优先级,如何选择 1. 行内样式行内样式就是把 CSS 样式直接放在代码行内的标签中,一般都是放入标签的style属性中,由于行内样式直接插入标签中,故是最直接的一种方 ...
CSS的四种引入方式
1.使用link标签引入css文件: <head><link rel="stylesheet" type="text/css" href=&q ...
css水平垂直居中四种常用方式
css水平垂直居中第一种:flex布局水平垂直居中思路: 给父盒子display属性设置flex值,然后使用justify-content与align-item属性进行居中. 参考:阮一峰的fle ...
如何把html和css 结合,css-css和html的结合方式（四种结合方式）
(1)在每个html标签上面都有一个属性 style,把css和html结合在一起我是一只小小鸟 (2)使用html的一个标签实现, css代码; div { background-color:re ...
CSS中左上朝向三角形(Top-Left Triangle)的几种制作方式
今天我们介绍几种,用css实现左上朝向三角形(Top-Left Triangle)的写法. 示意图(以宽高各60px为例): 这种三角形,一般可以用来做"对话框"类型图形的左下小脚 ...

html中将scss转编译为css,SASS把scss转化为css的四种转化方式与命令

html中将scss转编译为css,SASS把scss转化为css的四种转化方式与命令相关推荐

最新文章

热门文章