美文网首页
0906_css预编译器 - scss

0906_css预编译器 - scss

作者: 天才在战斗 | 来源:发表于2016-09-09 18:23 被阅读54次

    新内容(sass)

    概述

    由于 css 本身的一些局限性(效率低、扩展低、重用低、维护难),所以诞生了一些 css 的处理器来简化 css 的编写

    sass 是 css 预处理器中的其中一种,使用 ruby 编写的、具有编程思想的 css 预处理器

    sass 简介

    sass 编译方式(四种)

    • nested:嵌套缩进的 css 代码,默认
    • expanded:没有缩进的、扩展的 css 代码
    • compact:简洁格式的 css 代码
    • compressed:压缩格式的 css 代码

    混合宏(举例)

    button按钮,抽取一个公共常用样式,便于实现按钮样式复用

    import - 导入外部文件,“_ 表示资源文件,不会默认编译,在.scss文件名前加_”(导入文件是直接合并代码,而不是引入)

    基于 sass 的二次开发(框架)compass (它的关系就类似与js - jQ)

    作业(美观、可用、无BUG)

    • 一个页面,最少两种换肤
    • sass 语法规则
    • 好的注释,源码

    课下学习

    资料

    内容

    • ruby 安装
    • sass 安装
    • sass 文件编译
    • sass 语法
    • 编译
    • 变量
    • 嵌套
    • 混合宏 (注意结合以下两项三者之间的区别)
    • 扩展/继承
    • 占位
    • 运算
    • 逻辑控制
    • 函数
    • “@” 符号

    相关文章

      网友评论

          本文标题:0906_css预编译器 - scss

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