SCSS 見本

本家SassのサイトからScssの見本部分だけ簡単に見たいと思ってそのまま引用させていただきました。詳しくは、本家サイトをご覧ください。

• Sass(https://sass-lang.com/)
• Sass Basics(https://sass-lang.com/guide)

Variables（変数）

$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
 font: 100% $font-stack;
 color: $primary-color;
}

↓ ↓ ↓ 

body {
 font: 100% Helvetica, sans-serif;
 color: #333;
}

Import

// _reset.scss
html, body, ul, ol {
 margin: 0;
 padding: 0;
}


// base.scss
@import 'reset';
body {
 font: 100% Helvetica, sans-serif;
 background-color: #efefef;
}

↓ ↓ ↓ 

html, body, ul, ol {
 margin: 0;
 padding: 0;
}
body {
 font: 100% Helvetica, sans-serif;
 background-color: #efefef;
}

Mixins

@mixin border-radius($radius) {
 -webkit-border-radius: $radius;
 -moz-border-radius: $radius;
 -ms-border-radius: $radius;
 border-radius: $radius;
}
.box { @include border-radius(10px); }

↓ ↓ ↓ 

.box {
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -ms-border-radius: 10px;
 border-radius: 10px;
}

Extend/Inheritance

.message {
 border: 1px solid #ccc;
 padding: 10px;
 color: #333;
}

.success {
 @extend .message;
 border-color: green;
}

.error {
 @extend .message;
 border-color: red;
}

.warning {
 @extend .message;
 border-color: yellow;
}

↓ ↓ ↓ 

.message, .success, .error, .warning {
 border: 1px solid #cccccc;
 padding: 10px;
 color: #333;
}

.success {
 border-color: green;
}

.error {
 border-color: red;
}

.warning {
 border-color: yellow;
}

Operators

.container { width: 100%; }

article[role="main"] {
 float: left;
 width: 600px / 960px * 100%;
}

aside[role="complementary"] {
 float: right;
 width: 300px / 960px * 100%;
}

↓ ↓ ↓ 

.container {
 width: 100%;
}

article[role="main"] {
 float: left;
 width: 62.5%;
}

aside[role="complementary"] {
 float: right;
 width: 31.25%;
}