Webstorm настройки
index.html |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>Example SASS -SCSS</title> <link rel="stylesheet" href="/css/style.css"> </head> <body> <h1>Hello world!</h1> <h2 class="one">Hello world 2!</h2> <h3 class="two">Hello world 3!</h3> </body> </html>
style.scss |
/* Так делаются комментарии */ @import "reset"; //импорт других разных блоков в один файл: хедер, футер, сайдбар, меню, контент и т.п. То что начинается на _reset по умолчанию не создается файл .css с таким же названием. @import "variables"; body { color: $fontcolor; background: $arcolor; } nav { color: white; li { color: yellow; } } .link { color: greenyellow; &:hover{ color: yellow; } } .borradbott { @include bradius(10px); //Миксины задаются "@mixin bradius($rad)" - с парраметрами - переменно, что облегчает интегрирование больших кусков кода. @extend .link; //расширяется - тоесть наследует стили указанного селлектора. } .one { color: $colorte; widows: $w; margin: 0 auto; @include bradius(5px) { //Расширили Миксин, потому что в нем прописано свойство @content background: #6c97aa; } } .two { @extend .one; color: darken($colorte, 15%); // В SASS существует множество готовых функций, чтобы выполнять самые разнообразные цели, предположим эта затемняет цвет на 15 процентов. width: $w/3; } @debug -(10px - 15px);
variables.scss |
$arcolor: #7ed8e2; $fontcolor: #fdfbfb; $fsb: 14px; //базовый размер шрифта темы, делается для того, чтобы изменить шрифт разом $ff: Roboto, Helvetica, Arial, sans-serif; $colorte: #507f9b; //тестовый цвет $w: (70% + 5%); //ширина // Все математические операции оборачиваем в скобки!!! Одна единица измерения: пиксели, проценты и т.п.
_reset.scss |
* { margin: 0; padding: 0; } @mixin bradius($rad: 3px){ // Параметры можно задавать со значением по умолчанию -webkit-border-radius: $rad; border-radius: $rad; @content; //можно не пладить миксины из-за пару свойств, а создать этот парметр, тога к месту где инклюдится данный микс можно добовлят дополнительные свойства через {css свойства} } @mixin padd($padd...) { // чтобы можно было передавать несколько значений в парметр, ставим "..." @include padd (20px 22px 27px 2px) padding: $padd; } @mixin grid($cols, $margin){ float: left; background: blueviolet; margin-right: $margin; margin-bottom: $margin; height: 150px; @if($cols >=5 ) { //можно задавать условные операторы width: 100%; margin-right: 0; } @else { width: ((100% -(($cols - 1) * $margin)) / $cols) // можно задавать сложные математические функции для высчита колонок в процентах на гридах, где можно будет потом легко менять их колличество и дизайн. } &:nth-child(#{$cols}n) { //высчитывает колличество дочерних эллементов и проставляет последний. margin-right: 0; } } @for $i from 24 to 29 {}
По мотивам этой сказки –
