sass的几种输出格式,你都知道吗

更新日期: 2022-07-09阅读: 1.4k标签: sass

输出格式说明

Sass编译输出的css格式可以自定义。

有4种输出格式:

  • :nested – 嵌套格式
  • :expanded – 展开格式
  • :compact – 紧凑格式
  • :compressed – 压缩格式

默认格式是:nested。

可以使用:style选项或使用style命令行参数设置输出格式。

命令标准格式:

sass  --watch   (scss文件):(要生成的目标css文件)  --style  (输出格式)

例如:

sass --watch index.scss:index.css --style compressed


不同格式输出

接下来我们把如下的css经过不同格式的编译,看不同输出格式的区别:

html{
    font-size: 12px;
    color: #333;
}
.container{
    font-size: 14px;
    .header{
        width: 50%;
        height: 30px;
        .left{
            float: left;
        }
    }
    .footer{
        background-color: green;
    }
    &::after{
        display: inline-block;
    }
}

nested – 嵌套格式

html {
  font-size: 12px;
  color: #333; }

.container {
  font-size: 14px; }
  .container .header {
    width: 50%;
    height: 30px; }
    .container .header .left {
      float: left; }
  .container .footer {
    background-color: green; }
  .container::after {
    display: inline-block; }

expanded – 展开格式

html {
  font-size: 12px;
  color: #333;
}

.container {
  font-size: 14px;
}

.container .header {
  width: 50%;
  height: 30px;
}

.container .header .left {
  float: left;
}

.container .footer {
  background-color: green;
}

.container::after {
  display: inline-block;
}

compact – 紧凑格式

html { font-size: 12px; color: #333; }

.container { font-size: 14px; }

.container .header { width: 50%; height: 30px; }

.container .header .left { float: left; }

.container .footer { background-color: green; }

.container::after { display: inline-block; }

compressed – 压缩格式

html{font-size:12px;color:#333}.container{font-size:14px}.container .header{width:50%;height:30px}.container .header .left{float:left}.container .footer{background-color:green}.container::after{display:inline-block}


总结

通过观察不同的输出格式可以看出,compressed – 压缩格式 转出的文件是最小的,所以该格式通过为项目发布时设置的格式,开发阶段为了更好地观察编译结果,通过设置为expanded – 展开格式,也可以设置为compact – 紧凑格式,根据自己的喜好来。

这就是sass的四种转出格式的详细介绍。

链接: https://fly63.com/article/detial/11873

Sass简单、快速上手_Sass快速入门学习笔记总结

Sass是世界上最成熟、稳定和强大的专业级CSS扩展语言 ,除了Sass是CSS的一种预处理器语言,类似的语言还有Less,Stylus等。 这篇文章关于Sass快速入门学习笔记。

SASS简介及使用方法

Sass是css的一个扩展开发工具,它允许你使用变量、条件语句等,使开发更简单可维护。这篇文章介绍:基本语法(变量、计算功能、嵌套、注释、继承、混合、颜色函数、引入外部文件)、高级用法(函数 function、if条件语句、循环语句)

SCSS提取和懒加载

本节课讲解在webpack v4中的 SCSS 提取和懒加载。值得一提的是,v4和v3在 Scss 的懒加载上的处理方法有着巨大差别。本节课主要涉及 SCSS 在懒加载下提取的相关配置和插件使用。

webpack配置sass模块的加载

webpack管理的项目,我们希望用sass定义样式,为了正常编译,需要做如下配置。这里不讲webpack的入门,入门的文章,我推荐这篇《webpack入门》。为了使用sass,我们需要安装sass的依赖包

4种灵活的Scss编译输出风格整理

很多人从使用Scss的那一刻起,就被别人告诉了如何编译。所以,基本上也就只会一种命令编译方式。其实Scss提供了4种风格输出CSS,以满足更多人的需求。不同的输出方式如下:

Vue-cli 3.0 使用Sass Scss Less预处理器

项目中使用预处理器,可以有效减少css代码量,使用Sass||Scss||Less;你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。如果当时没有选好,内置的 webpack 仍然会被预配置为可以完成所有的处理。

sass和less的优缺点

sass和less都是css的预编译处理语言,他们引入了mixins,参数,嵌套规则,运算,颜色,名字空间,作用域,JavaScript赋值等 加快了css开发效率,当然这两者都可以配合gulp和grunt等前端构建工具使用

原生 CSS “杀死” 预处理器 Sass!

我也无意中(至少在开始时)从我的代码库中删除了所有Sass的痕迹。这不是我打算做的事情,但是我看到我的旧Sass文件的次数越多,我就会更加地质疑它是否为我的网站增加了价值,或者只是增加了额外的复杂性和依赖性

Sass和Less的区别?

这篇文章主要解答以下几个问题,供前端开发者的新手参考。1、什么是Sass和Less?2、为什么要使用CSS预处理器?3、Sass和Less的比较4、为什么选择使用Sass而不是Less?

SCSS 常用属性合集

Scss 文档太多了,但还是耐心看完了,总结自己常用的一些语法。Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!