• sass学习--在htm文件中使用


    一、导语

      最近的战狼2好火爆啊,每天看战狼2的票房一路高飙,我估计比吴京还开心。看了这部戏的拍摄过程,除了敬佩就是踏实,是的,吴京是电影圈隔了这么久后能踏踏实实做电影的了,纯属个人见解,不喜请忽略。。。。。。。。。。。。。。。。。。。。。

      说道踏实,好吧,我要把基础给踩踩了,说说最简单的sass是怎么在html中运行的

    二、正文(文中编辑器使用webstorm)

      1、创建项目untitlecl(如此随意,我连默认名都懒得改了,,,,,,,),再创建H5格式的html   textsass.html   

      2、textsass.html

        引入sass的样式文件,注意引入时,要写.css的后缀名而不是.sass的后缀名

       

      3、创建sass格式的文件

      

      

      4、编写sass文件的样式

      

      5、控制台输入  sass common.sass  (common为sass文件的样式名)可在控制台上看到编译成功后的css文件

      

      6、将sass文件编译成css置放于项目中,可使用命令  sass common.scss common.css   

       

      自动编译后生成在项目中结构如下:

      

      7、运行项目可看到效果

      

      

      8、我们不可能每次改某个样式,都要重新 sass common.scss common.css  一下吧,所以有个监听方法 sass --watch common.sass:common.css

      这样每次一修改样式,刷新下浏览器,就能看到最新的效果了。

      若是要监听整个项目的样式,则使用命令 sass --watch stylesheets/sass:stylesheets/css

      9、SASS提供四个编译风格的选项:

        1)、nested:嵌套缩进的css代码,它是默认值。

        2)、expanded:没有缩进的、扩展的css代码。

        3)、compact:简洁格式的css代码。

        4)、compressed:压缩后的css代码。

        一般生产环境中使用最后一个 sass --style compressed test.sass test.css

    三、结尾

      边琢磨边写的,肯定有许多bug,欢迎指出

      

  • 相关阅读:
    Akka源码分析-Extension
    Akka源码分析-Remote-Creating Actors Remotely
    24-2 show构造方法
    day24-1构造方法
    day23-4 最小值-到最大值排序
    day23-4 最小值-到最大值冒泡排序
    day23-3 最大值-到最小值排序
    day23-2 倒叙
    day23-1 水仙花
    day22 随机输出ArrayList
  • 原文地址:https://www.cnblogs.com/atjinna/p/7299077.html
Copyright © 2020-2023  润新知