美文网首页
1、sass入门(css的开发工具,简化css工作流)

1、sass入门(css的开发工具,简化css工作流)

作者: 沈念一 | 来源:发表于2020-06-09 09:37 被阅读0次
1、官网地址

Sass官网:http://sass-lang.com/
Sass中文网:https://www.sass.hk/

2、sass的安装
  • 1、下载安装ruby
  • 2、 测试ruby是否安装(ruby -v)
  • 3、安装sass
gem install sass
3、sass的编译
  • 1、cmd
$cmd
$ sass t.scss //显示scss文件转化的css代码
$ sass t.scss t.css    //保存为.css格式文件
  • Sass 提供4种编译风格
sass --style nested style.sass style.css       #嵌套缩进的css代码,它是默认值
sass --style expanded style.sass style.css     #没有缩进的、扩展的css代码。
sass --style compact style.sass style.css      #简洁格式的css代码
sass --style compressed style.sass style.css   #压缩后的css代码。
  • 单文件监听命令(添加--watch命令)
sass --watch style.scss:style.css
//  --watch 参数加上之后,可以监测style这个文件的变化,更新保存后自动编译。
  • 多文件(文件夹)监听命令
sass --watch sass/main:dist/css
#监视sass目录下main文件夹中的所有Sass文件,自动编译为CSS文件之后,放到dist/css目录下。

相关文章

  • Sass 与 Compass 入门

    一、背景知识 1、Sass是什么? Sass可以简化你的Css工作流,并可以使你的Css的扩展和维护工作变的更加容...

  • 1、sass入门(css的开发工具,简化css工作流)

    1、官网地址 Sass官网:http://sass-lang.com/;Sass中文网:https://www.s...

  • css

    less css / sass 简化的css语言 postcss 一种css处理程序。 三个引用css方式 1.内...

  • CSS基础知识

    CSS的推荐工具 LESS CSS一种简化、功能更多的 CSS 语言 SASS一种简化、功能更多的 CSS 语言(...

  • 成长(17/2000)——SASS1

    配套 sass中文网[https://www.sass.hk/docs/] sass是写css的工具,它可以简化我...

  • SASS用法指南

    一、什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发...

  • SASS 学习笔记

    什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变...

  • sass 指令的使用

    一、什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发...

  • Sass 入门

    Sass 入门 Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variable...

  • Sass入门篇

    Sass入门 Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables...

网友评论

      本文标题:1、sass入门(css的开发工具,简化css工作流)

      本文链接:https://www.haomeiwen.com/subject/meijtktx.html