Sass (Syntaxically Awesome Stylesheets) — очень удобная реализация CSS. В моем предыдущем посте я дал широкий обзор Sass. Здесь я опишу более подробно функции, найденные в Sass. Я писал, что Sass позволяет использовать переменные для хранения шестнадцатеричных значений и выполнения арифметических операций с цветами, что снижает сложность, но также может сделать гораздо больше.
гнездование
Sass уменьшает сложность кодирования, позволяя программисту вкладывать селекторы и свойства селектора. Естественно, программисты находят в этом большую ценность. Например, возможность вкладывать CSS-правила в определенный класс / идентификатор гораздо удобнее, чем многократно вводить их. Таким образом, как и другие широко распространенные языки программирования, такие как Ruby, Sass теперь допускает вложение функций и циклов с помощью CSS.
| #container p { | |
| color: #6E6E6F; | |
| width: 97%; | |
| .tab { | |
| margin-top:30px; | |
| background-color: #ff0000; | |
| color: #000000; | |
| } | |
| } |
by теперь можно скомпилировать в:
| #container p { | |
| color: #6E6E6F; | |
| width: 97%; } | |
| #container p .tab { | |
| margin-top:30px; | |
| background-color: #ff0000; | |
| color: #000000; } |
Справочные операторы
Еще одна полезная функция в Sass — оператор ссылки (&). Оператор ссылки позволяет ссылаться на родительские селекторы, что может быть очень полезно при необходимости вызова непосредственного родительского селектора, как показано ниже.
| .test { | |
| a { | |
| color: #736F6E;; | |
| &:hover { color: #ff9933; } | |
| &:visited { color: #336699; } | |
| }} |
может быть скомпилировано в:
| .test a { | |
| color: #736F6E; } | |
| .test a:hover { | |
| color: #ff9933; } | |
| .test a:visited { | |
| color: #336699; } |
В приведенном выше случае оператор & был заменен непосредственным родительским селектором a .
Sass также позволяет вкладывать свойства из одного и того же пространства имен. Например, border-left, border-right, border-radius и border-style все связаны с пространством имен границ, и все, что нужно сделать, это упомянуть пространство имен один раз и вложить свойства.
| .test { | |
| border:{ | |
| style: solid; | |
| left: thick double #ff0000; | |
| right: | |
| { | |
| width:thick; | |
| color:#00ff00; | |
| } | |
| } | |
| } |
составлен в
| .test { | |
| border-style: solid; | |
| border-left: thick double #ff0000; | |
| border-right-width: thick; | |
| border-right-style: double; | |
| border-right-color: #00ff00; } |
Если Sass не выглядит привлекательным для вас (пока), вот что-то намного лучше: элегантное навигационное меню в Sass. Я использовал все удивительные функции, обсуждаемые в этом уроке. Кроме того, попытка декодировать его в CSS должна помочь вам лучше понять Sass.
| /*This is a clean gradient menu purely based on CSS3 */ | |
| $lightgrey: #A8ACAD; //assigning colors to variables | |
| $darkgrey:#736F6E; | |
| div#header | |
| { | |
| background:-webkit-gradient(linear, left top, left bottom, from($lightgrey), to($darkgrey)); //gradient for the navigation menu | |
| background: -moz-linear-gradient(top, $lightgrey, $darkgrey); | |
| border: | |
| { //nesting properties of a specific namespace | |
| radius: 10px; | |
| left: 1px solid rgba(0, 0, 0, 0.1); | |
| right: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| box: | |
| { | |
| shadow: 5px 5px 20px #a5a5a5; | |
| } | |
| width: 95%; | |
| height: 50px; | |
| margin: | |
| { | |
| left: 10px; | |
| right: 20px; | |
| } | |
| ul | |
| { | |
| padding: 0; | |
| margin: 0; | |
| float: left; | |
| } | |
| li | |
| { | |
| float: left; | |
| list-style: none; | |
| a | |
| { | |
| &:link // reference operator in action | |
| { | |
| display: block; | |
| text: | |
| { | |
| decoration: none; | |
| align: center; | |
| shadow: 0px 0px 10px #000; | |
| } | |
| height: 35px; | |
| width: 95px; | |
| padding: | |
| { | |
| top: 15px; | |
| left: 10px; | |
| right: 10px; | |
| } | |
| color: #ffffff; | |
| font: | |
| { | |
| weight: bold; | |
| } | |
| border: | |
| { | |
| left: 1px solid rgba(255, 255, 255, 0.1); | |
| right: 1px solid rgba(0, 0, 0, 0.1); | |
| } | |
| } | |
| &:visited | |
| { | |
| color: #ffffff; | |
| font: | |
| { | |
| weight: bold; | |
| } | |
| border: | |
| { | |
| left: 1px solid rgba(255, 255, 255, 0.1); | |
| right: 1px solid rgba(0, 0, 0, 0.1); | |
| } | |
| text: | |
| { | |
| shadow: 0px 0px 10px #000; | |
| } | |
| } | |
| &:hover | |
| { | |
| color: orange; | |
| text: | |
| { | |
| shadow: 0px 0px 10px #000; | |
| } | |
| } | |
| } | |
| } | |
| }//Sass is simply good, right? |
Вот версия CSS.
| /*This is a clean gradient menu purely based on CSS3 */ | |
| div#header { | |
| background: -webkit-gradient(linear, left top, left bottom, from(#a8acad), to(#736f6e)); | |
| background: -moz-linear-gradient(top, #a8acad, #736f6e); | |
| border-radius: 10px; | |
| border-left: 1px solid rgba(0, 0, 0, 0.1); | |
| border-right: 1px solid rgba(255, 255, 255, 0.1); | |
| box-shadow: 5px 5px 20px #a5a5a5; | |
| width: 95%; | |
| height: 50px; | |
| margin-left: 10px; | |
| margin-right: 20px; } | |
| div#header ul { | |
| padding: 0; | |
| margin: 0; | |
| float: left; } | |
| div#header li { | |
| float: left; | |
| list-style: none; } | |
| div#header li a:link { | |
| display: block; | |
| text-decoration: none; | |
| text-align: center; | |
| text-shadow: 0px 0px 10px #000; | |
| height: 35px; | |
| width: 95px; | |
| padding-top: 15px; | |
| padding-left: 10px; | |
| padding-right: 10px; | |
| color: #ffffff; | |
| font-weight: bold; | |
| border-left: 1px solid rgba(255, 255, 255, 0.1); | |
| border-right: 1px solid rgba(0, 0, 0, 0.1); } | |
| div#header li a:visited { | |
| color: #ffffff; | |
| font-weight: bold; | |
| border-left: 1px solid rgba(255, 255, 255, 0.1); | |
| border-right: 1px solid rgba(0, 0, 0, 0.1); | |
| text-shadow: 0px 0px 10px #000; } | |
| div#header li a:hover { | |
| color: orange; | |
| text-shadow: 0px 0px 10px #000; } |
Возможно, вы заметили однострочные (//) и многострочные комментарии (/ * * /), которые я использовал во фрагменте кода. Комментарии Sass аналогичны тем, что встречаются в C ++, и они помогают улучшить читаемость исходного кода. CSS поддерживает блочные / многострочные комментарии. Однако он пока не поддерживает однострочные комментарии, поэтому они были удалены из исходного кода во время компиляции, как видно из фрагмента CSS в меню навигации.
функции
Функции лежат в основе всех языков программирования. У Sass есть много таких функций, включая RGB, HSL, прозрачность и другие цвета, строковые, числовые и списочные функции. Одной из полезных функций является триплет RGB, который можно преобразовать в шестнадцатеричное значение цвета с помощью функции rgb($red,$green,$blue) , как показано ниже.
| p { | |
| color: rgb(0, 255, 255); | |
| } |
составлен в
| p { | |
| color:#00ffff; } |
Есть также функции для смешивания цветов ( mix($color1, $color2, $weight) ) и извлечения компонентов цвета из заданного шестнадцатеричного значения, но мои личные избранные перечислены ниже.
opacify($color, $value)
Как следует из названия, opacify делает цвет более непрозрачным. $ color должен быть в формате rgba, а значение $ должно быть в диапазоне от 0 до 1.
transparentize($color,$value)
Эта функция преобразует цвета, делая их более прозрачными, уменьшая непрозрачность базового цвета $ с заданным значением $ . Другие включают в себя:
-
lighten($color, $value) -
darken($color, $value) -
saturate($color, $amount) -
grayscale($color)
Sass также имеет математические функции, которые позволяют округлять до ближайшего целого числа, чтобы вычислить абсолютные значения и проценты. Они очень полезны при изменении цветов и расчете полей и отступов для элементов CSS. Подробнее можно прочитать здесь
К сожалению, обсуждение всех функций Sass выходит за рамки данного руководства, и читателю предлагается изучить их самостоятельно.
интерполирование
Интерполяция также расширяет область видимости переменных в Sass. Например, он разрешает размещение переменных в селекторах, свойствах и пространствах имен. Ниже приведен такой пример.
| $side:top; | |
| $name: border; | |
| $rad:7px; | |
| .footer-#{$name} | |
| { | |
| background-color: #CCCCCC; | |
| #{$name}-radius: $rad; | |
| -moz-#{$name}-radius:$rad; | |
| -webkit-#{$name}-radius: $rad; | |
| #{$name}—#{$side}: 2px double #fff000; | |
| #{$name}-bottom: 2px double #fff000; | |
| width: 95%; | |
| } |
Вывод CSS:
| .footer-border | |
| { | |
| background-color: #878382; | |
| border-radius: 7px; | |
| -moz-border-radius: 7px; | |
| -webkit-border-radius: 7px; | |
| border-top: 2px double #fff000; | |
| border-bottom: 2px double #fff000; | |
| width: 95%; | |
| } |
Примеси
Разработчики Ruby могут быть знакомы с миксинами, синонимичными с абстрактными базовыми классами. Существование миксинов является веской причиной для использования Sass поверх CSS. Миксины могут содержать что угодно, включая селекторы, содержащие свойства и родительские ссылки, правила, функции и даже принимать аргументы, что позволяет повторно использовать код. Они приведены ниже.
| @mixin borderstuff | |
| { | |
| $name: border; | |
| $rad:7px; | |
| background-color: #CCCCCC; | |
| #{$name}-radius: $rad; | |
| -moz-#{$name}-radius:$rad; | |
| -webkit-#{$name}-radius: $rad; | |
| #{$name}-top: 2px double #fff000; | |
| #{$name}-bottom: 2px double #fff000; | |
| width: 95%; | |
| } | |
| div#header { @include borderstuff }; | |
| div#footer { @include borderstuff}; |
Вывод CSS ниже.
| div#header { | |
| background-color: #CCCCCC; | |
| border-radius: 7px; | |
| -moz-border-radius: 7px; | |
| -webkit-border-radius: 7px; | |
| border-top: 2px double #fff000; | |
| border-bottom: 2px double #fff000; | |
| width: 95%; } | |
| div#footer { | |
| background-color: #CCCCCC; | |
| border-radius: 7px; | |
| -moz-border-radius: 7px; | |
| -webkit-border-radius: 7px; | |
| border-top: 2px double #fff000; | |
| border-bottom: 2px double #fff000; | |
| width: 95%; } |
Это очень впечатляет. Как уже упоминалось, mixins также может иметь аргументы, которые являются параметрами, передаваемыми в mixin, которые присваиваются значению при каждом вызове mixin, как показано ниже.
| @mixin borderstuff ($bgcolor, $radius, $bordercolor) | |
| { | |
| background-color: $bgcolor; | |
| border-radius: $radius; | |
| -moz-border-radius:$radius; | |
| -webkit-border-radius: $radius; | |
| border-top: 2px double $bordercolor; | |
| border-bottom: 2px double $bordercolor; | |
| width: 95%; | |
| } | |
| div#header{ @include borderstuff(#cccccc, 10, #fff000)} |
В приведенном выше примере $bgcolor было присвоено значение #cccccc , $radius было 10, а $bordercolor было #fff000 .
Mixins также поддерживают аргументы по умолчанию. Например, @mixin borderstuff($bgcolor,$radius:10, $bordercolor) имеет аргумент значения по умолчанию, определенный для аргумента $radius . Если значение $radius не передается при вызове mixin, вместо него используется аргумент по умолчанию.
Директивы @import
С динамическими сайтами таблицы стилей растут со временем. В результате большинство веб-дизайнеров предпочитают разбивать таблицы стилей на несколько файлов и связывать их вместе, используя директиву CSS @import . Но проблема заключается в том, что каждая таблица стилей делает определенный HTTP-запрос, тем самым замедляя общее время загрузки веб-страницы. Отличным решением Sass для этого является использование директивы @import , которая связывает таблицы стилей вместе и преобразует их в отдельные файлы CSS.
Кроме того, @import также импортирует все переменные и миксины, определенные в таблице стилей, делая их доступными в основной таблице стилей.
Как уже говорилось ранее, все таблицы стилей можно поместить в каталог app / assets / stylesheets, а rails будет управлять остальными даже без директивы @import . Например:
| @import «foo.scss«; |
Чтобы импортировать несколько файлов
| @import «foo« «bar«; //the extension is optional and sass would look for foo.scss and bar.scss in the current directory and import them. |
Partials
Частичными являются файлы Sass с префиксом символа подчеркивания, которые можно импортировать, но не компилировать в CSS. Например, файл _borders.scss — это часть, которая не будет скомпилирована в _borders.css, но может быть импортирована из основного файла Sass с помощью следующей директивы импорта:
| @import «borders» //note that I haven’t prefixed it with the underscore since it isn’t really necessary |
Директивы @media
Директивы @media в Sass работают аналогично CSS, за исключением того, что они также могут быть вложены в правила CSS. Когда директивы @media содержатся в правилах CSS, они поднимаются на более высокий уровень, тем самым сбрасывая все селекторы внутри правила.
| .sidebar { | |
| width: 300px; | |
| @media screen and (orientation: landscape) { | |
| width: 500px; | |
| } | |
| } |
компилируется в:
| .sidebar { | |
| width: 300px; } | |
| @media screen and (orientation: landscape) { | |
| .sidebar { | |
| width: 500px; } } |
Директивы @extend
Производные @extend являются одними из самых продвинутых и полезных функций в Sass. Они позволяют одному копировать все стили селектора в другой, не дублируя свойства селектора.
До Sass веб-разработчики решали эту проблему следующим образом.
| <!—HTML—> | |
| <div class=»error Fatalerror«> | |
| “You’ve encountered an error, notify the webmaster to resolve the issue” </div> |
| .error | |
| { | |
| border: 1px #fdd; | |
| color: #332c2c; | |
| } | |
| .Fatalerror | |
| { | |
| border: 3px #ff0; | |
| font-weight:bold; | |
| } |
К сожалению, класс Fatalerror не существовал бы, если бы он не использовался с ошибкой класса, что вызывает проблемы с поддержанием кода в долгосрочной перспективе.
Sass предлагает отличное решение для наследования селекторов через директиву @extend , как показано ниже.
| .error | |
| { | |
| border: 1px #fdd; | |
| color: #332c2c; | |
| } | |
| .Fatalerror | |
| { | |
| @extend .error | |
| border: 3px #ff0; | |
| font-weight:bold; | |
| } |
Помимо классов, он также может наследовать селекторы от a:hover .
| .link { | |
| @extend a:hover; | |
| } | |
| a:hover { | |
| text-decoration: underline; | |
| } |
Кроме того, поддерживается многократное использование @extend .
| .link { | |
| @extend a:hover; | |
| @extend .funky; | |
| } | |
| a:hover { | |
| text-decoration: underline; | |
| } | |
| .funky { | |
| font-weight:bold; | |
| } |
Директивы управления
Управляющие директивы в Sass идентичны управляющим операторам в Ruby. Они предлагают Sass интеллект для принятия решений на основе определенных условий. Директива управления также позволяет повторить некоторые стили с небольшим изменением.
@если
Директива @if вычисляет выражение и возвращает стили, вложенные в выражение, которое оценивается как true.
| .sidebar{ | |
| @if 5 < 3 { border: 2px dotted; } | |
| @if 2*2 ==0 { border: 1px solid; } | |
| @0<25 { border: 3px double; } | |
| } | |
| is compiled to | |
| .sidebar{ | |
| border: 3px double | |
| } |
Существует также @else if обычно следует за @if . Если оператор @if завершается неудачно, @else if будет выполняться до тех пор, пока он не удовлетворяет данному условию. Если все не удается, Sass в конечном итоге будет искать директиву @else которая действует как инструкция по умолчанию.
| $bgcolor:cyan; | |
| .sidebar{ | |
| @if $bgcolor==blue {background-color:#0000ff; color:#ffffff;} | |
| @else if $bgcolor==red {background-color:#ff0000; color:#ffffff;} | |
| @else if $bgcolor==cyan{background-color: #00ffff; color:#cccccc;} | |
| @else {background-color:#ffffff;color:#000000;} | |
| } |
составлен в
| .sidebar{ | |
| background-color:#00ffff; color:#cccccc;} |
@за
Директива @for используется для зацикливания набора операторов. Например, если вас попросят создать стили для боковой панели веб-сайта. И если предположить, что боковая панель содержит более одного элемента CSS, практически идентичного, но с небольшим изменением, вы можете использовать директиву @for чтобы упростить задачу.
| @for $i from 1 through 4 { | |
| .sidebar-element-#{$i} { height: 2em * $i; } | |
| } |
составлен в
| .sidebar-element-1 { | |
| height: 2em; } | |
| .sidebar-element-2 { | |
| height: 4em; } | |
| .sidebar-element-3 { | |
| height: 6em; } | |
| .sidebar-element-4 { | |
| height: 8em; } |
@пока
Директива @while также используется для многократного вывода стилей CSS. Вот как можно добиться тех же результатов CSS, но с @while директивы @while .
| $i:0 | |
| while $i<4 | |
| { .sidebar—element—#{$i} { height: 2em * $i; } | |
| $i:$i+1; | |
| } |
Sass делает веб-дизайн приятным — вы должны убедиться сами!
Полная документация по Sass доступна для получения дополнительной информации здесь: Документация Sass .