SCSS 見本

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

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%;
}

 

 

 

tagTimeLog Lite

Simple time tracking tool
Developed by Namu Works