[Sass] Architect : the 7 - 1 pattern

2018. 7. 20. 21:30・Frontend/HTML, CSS

7 different folders for partial Sass files, and 1 main Sass file to import all other files into a compiled CSS stylesheet.

 

The 7 folders:

 

base/

  • basic product definitions

components/

  • one file for each component

layout/

  • define the overall layout of the project

pages/

  • styles for specific pages of the project

themes/

  • want to implement different visual themes

abstract/

  • put code that doesn't output any CSS such as variables or mixins

vendors/

  • all third party CSS goes mixin(a huge variable with multiple lines of code) is just a reusable piece of code
  • whenever we want that, that mixin that code is then put in the place where we used or where we called that mixin.

 

@mixin clearfix {

content:"";

display:block;

clear:both;

}

@mixin variable-name(argument) {

}

@mixin style-link-text($col) {

color: $col;

}

@include style-link-text($color-text-dark);
/* $color-text-dark is that we need a argument! */

 

저작자표시 비영리 변경금지 (새창열림)

'Frontend > HTML, CSS' 카테고리의 다른 글

[CSS] #1 The box model  (0) 2021.10.09
[HTML] #1 Hypertext Markup Language  (0) 2021.10.08
[css] the problem of setting the font-size to pixels of body element  (0) 2018.07.15
[css] Inheritance In CSS  (0) 2018.07.13
[css] How UNITS are converted from relative to absolute(px)  (0) 2018.07.13
'Frontend/HTML, CSS' 카테고리의 다른 글
  • [CSS] #1 The box model
  • [HTML] #1 Hypertext Markup Language
  • [css] the problem of setting the font-size to pixels of body element
  • [css] Inheritance In CSS
dev.hyejin
dev.hyejin
  • dev.hyejin
    혜진의 개발자 성장블로그
    dev.hyejin
  • 전체
    오늘
    어제
    • 분류 전체보기 (89)
      • 2024 데브캠프 (2)
      • 회고 (1)
      • 이슈해결 (3)
      • 기초학습 (13)
      • Frontend (20)
        • JavaScript (3)
        • Git, GitHub (3)
        • HTML, CSS (14)
      • Backend (8)
        • Database (4)
        • Java (4)
      • CS (16)
        • Network (10)
        • Algorithm (6)
      • Eng (16)
      • Tips (5)
  • 인기 글

  • 태그

    GitHub
    점근성능
    시간복잡도
    런타임
    box-sizing
    border-box
    절대경로
    객체
    ER모델
    상대경로
  • hELLO· Designed By정상우.v4.10.3
dev.hyejin
[Sass] Architect : the 7 - 1 pattern
상단으로

티스토리툴바