I'll say Sass, but I'm talking about SCSS. `.sass` is an older style CSS preprocessor. `.scss` is the current file extension. I'll call it Sass, documentation will call it Sass, and all the file extensions are .scss
Allow you to set a value in one spot and use it throughout all of your files. Variables are auto detected and must start with $.
$theme: #f00;
a{
color:$theme;
border:1px solid $theme;
}
a{
color:#f00;
border:1px solid #f00;
}
Nest allows you to group your CSS and create a more specific CSS selector.
$theme: #f00;
.container {
a{
color:$theme;
border:1px solid $theme;
}
p{
color:black;
}
}
.container a{
color:#f00;
border:1px solid #f00;
}
.container p{
color:black;
}
.container {
.element{
a {
.icon{
color:blue;
}
.text{
color: black;
}
}
}
}
.container .element a .icon {
color:blue;
}
.container .element a .text {
color:black;
}
Partials contain small blocks of SCSS that can be used to manage specific components of your website. Partials typically start with an underscore.
* {
box-sizing: border-box;
}
h1,h2,h3, p{
margin:0;
padding:0;
}
When would we use this? How about when we import a .css file based on screen size.
$brandcolor: #f00;
$brandsecondary: #a00;
$spacing: 15px;
.navigation {
display:flex;
nav a{
color:$brandcolor;
margin:$spacing;
}
}
SASS's import functionality allows you to combine multiple SCSS files into one.
@import 'reset';
@import 'theme';
@import 'navigation';
@import 'footer';
@import 'page1';
Mixins allow you to write functions inside you SCSS and minimize your code footprint.
See the Pen UA-SCSS--MIXIN1 by Jon (@Middaugh) on CodePen.
See the Pen UA-SCSS--MIXIN2 by Jon (@Middaugh) on CodePen.
Extend allows you to share common CSS accross multiple classes.
See the Pen UA-SCSS--MIXIN3 by Jon (@Middaugh) on CodePen.
We can do math calculations inside of SASS. You can use the +, -, *, /, and % operators like you would in JavaScript. SASS will automatically work with px and % values.
See the Pen UA-SCSS--Operators by Jon (@Middaugh) on CodePen.
gem -v
gem install sass
sudo gem install sass
sass -v
npm install gulp-sass --save-dev
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
You can reference a nested selectors parent by using the & symbol.
See the Pen UAIT-SCSS-Nesting by Jon (@Middaugh) on CodePen.
Examine this in Chrome Dev Tools to see what's up.
You can use Sass variables for more than just values. You can use them in conjunction with selectors.
They must be used inside of a #{}
See the Pen UAIT-SCSS-Expanding Class by Jon (@Middaugh) on CodePen.
See the Pen UAIT-SCSS-Nesting-Deep by Jon (@Middaugh) on CodePen.
Using .class &{ will put .class before all other selectors
See the Pen UAIT-SCSS-Nesting-Parent by Jon (@Middaugh) on CodePen.
@at-root@at-root allows you to nest inside css for structure, but places the rules in the root of the css.
You can use it as an inline rule or as a wrapping rule.
See the Pen UAIT-SCSS-Nesting-Root by Jon (@Middaugh) on CodePen.
@ifSCSS has the ability to use if, else if, and else statements. These can be used to theme your styles or setup conditional formatting.
See the Pen UAIT-SCSS-Nesting-Root by Jon (@Middaugh) on CodePen.
@forYou can use SCSS to execute a for loop based on indexes. This is useful for generating grids and removing duplicate code.
See the Pen UAIT-SCSS-Nesting-For by Jon (@Middaugh) on CodePen.
@each
@each is used for looping through a defined collection of items.
See the Pen UAIT-SCSS-Nesting-Each by Jon (@Middaugh) on CodePen.
See the Pen UAIT-SCSS-Darken by Jon (@Middaugh) on CodePen.
You can customize the previews of your links being shared on Facebook by leveraging OG meta tags.
OG tags are meta tags that tell Facebook what to display when sharing.
og:url - The URL to the page.og:title - The title of the page.og:description
og:image - Preview image
This needs to be included right next to the opening body tag.
But only if you haven't added it yet.