Created by Kianosh Pourian / @kianoshp
User interface developer/designer/consultant
Co-author of "Sass in Depth"
%article#main-author.primary-article{"data-author-id" => "999"}
%h1 primary header title for paragraph below
%p
%a.external-link{:href => "#"} Example of body text link
<article id="main-author" class="primary-article" data-author-id="999">
<h1>primary header title for paragraph below</h1>
<p>
<a href="#" class="external-link">Example of body text link</a>
</p>
</article>
header
width: 100%
.nav
text-decoration: none
background: #fff
color: #333
p
font-weight: bold
header {
width: 100%;
}
header .nav {
text-decoration: none;
background: #fff;
color: #333;
}
header .nav p {
font-weight: bold;
}
All variables outside of a mixin or function will have a global scope. Any changes to the variable will set further references of the variable:
$text-color: blue;
.error {
$text-color: red;
color: $text-color;
}
.normal-text {
color: $text-color;
}
// !default values assigned mixin specified variables
$box-padding: 10px !default;
$box-background-color: orange !default;
// Mixin arguments set to specified variables as defaults
@mixin the-box($padding: $box-padding,
$background-color: $box-background-color) {
padding: $padding;
background-color: $background-color;
}
$default-browser-size: 16px !default;
@function responsive-size($fontSize: $default-browser-size) {
@return $fontSize/$default-browser-size * 1em;
}
@function rs($fontSize: $default-browser-size) {
@return responsive-size($fontSize);
}
@function linearGradientColors($stop-colors...) {
$full: false;
@each $stop-color in $stop-colors{
@if $full {
$full: $full + ',' + $stop-color;
} @else {
$full: $stop-color;
}
}
$full: unquote($full);
@return $full;
}
@function lgc($stop-colors...) {
@return linearGradientColors($stop-colors...);
}
$border-position-all: "all";
@mixin add-border($border-position: all, $border-size: 1px,
$border-pattern: solid, $border-color: black) {
@if $border-position == $border-position-all {
border: $border-size $border-pattern $border-color;
}
@else {
border-#{$border-position}: $border-size
$border- pattern $border-color;
}
}