Skip to content

Instantly share code, notes, and snippets.

@shotaK
Forked from frontend-gist/sass basics
Last active August 29, 2015 14:26
Show Gist options
  • Save shotaK/fc22a50c141d5ad7b637 to your computer and use it in GitHub Desktop.
Save shotaK/fc22a50c141d5ad7b637 to your computer and use it in GitHub Desktop.
sass
/* --------------------- Variables --------------------- */
/* SCSS */
$primary-color: #333;
body {
color: $primary-color;
}
/* CSS */
body {
color: #333;
}
/* --------------------- Nesting --------------------- */
/* SCSS */
.parent {
color: red;
.child {
color: blue;
}
&:hover {
color: red;
}
}
/* CSS */
.parent {
color: red;
}
.parent .child {
color: blue;
}
.parent:hover {
color: red;
}
/* --------------------- Nesting --------------------- */
/* SCSS */
@import 'reset'; /* yeah, no extention, this will import: reset.scss */
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
/* CSS */
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
/* --------------------- Mixins --------------------- */
/* SCSS */
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(10px);
}
/* CSS */
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
/* --------------------- Extend/Inheritance --------------------- */
/* SCSS */
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
/* CSS */
.message, .success {
border: 1px solid #cccccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment