zoukankan      html  css  js  c++  java
  • [SCSS] Organize SCSS into Multiple Files with Partials

    Tired of dealing with monolithic CSS files? Are requests for multiple CSS files hurting your performance? In this lesson we learn how to separate our styles with SCSS partials, and how SCSS imports compile to one file so there's only one request.

    Things to know:

    • If importing partial file, won't generate a new css file
    • If importing normal scss file, it will generate a new css file

    So when we should use partial import or not, you can think that whether this file should be used when app first loading? If it yes, then use partial import, if not, then normal import. The reason behind that is because browser will loading main css (the main.scss file that import other scss files ) file first. After this main.css file loaded, then browser will start loading other css file. 

    As you can see other.css which are import as normal import mode. "Content downloaded" happens after main.css file are downloaded.

    • Only partial file's variable can be shared accross the rest of partial file. But it also require you import that partial file which has variables defines into main.scss file before the rest partial files.
    /**
     About using variable
    
     There are tow cases when using variable
    
     1. none partial file (provider) + none partial file
        Variable only available for its own file scope.
        If you want to use one variable inside file A from file B
        You have to import file A into file B.
    
     2. partial file (provider) + none partial file
        If you have an variable defined in partial file, and you want to
        use it inside none partial file, you also need to import partial
        file into none partial file.
    
     3. partial file (provider) + partial file
        If you have an variable defined in partial file A, and you want to use it
        inside another partial file B, you have to import file A into main.scss file
        before you import file B into main.scss. Then you can use variable inside file A
        inside file B.
    */
    @import "color";
    @import "partial";
    @import "other";
    
    .color {
      color: $primary-color; // From _color
    }

    _color.scss

    $primary-color: lighten(red, 15%);
    
    .red {
      color: $primary-color;
    }

    _partial.scss

    .l-border {
      border-left: 5px solid $primary-color;
    }

    other.scss

    @import "color";
    
    .bg {
        background-color: $primary-color;
    }
  • 相关阅读:
    TomCat 的 Jenkins 报错:反向代理设置有误
    【Django】如何在类视图、普通视图单独不做CSRF校验
    【Django】HTML如何显示富文本内容
    Djaong 运行报错:ValueError: Unable to configure handler 'default'
    Windows 环境使用 Xshell 连接 VMware 虚拟机上的 CentOS 系统
    【我的青春我做主】让自己的心境安宁
    Django 使用 Nginx + uWSGI 启动
    Django_文件下载
    追梦何须要问成败,只管向前吧
    PyCharm:设置py文件头部信息
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6683041.html
Copyright © 2011-2022 走看看