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)
@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!
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.
'Frontend Developer > CSS' 카테고리의 다른 글
[CSS] #1-2 박스모델과 box-sizing (0) | 2021.10.13 |
---|---|
[CSS] #1 The box model (0) | 2021.10.09 |
[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 |