@ryusei/light
Version:
<div align="center"> <a href="https://light.ryuseijs.com"> <img alt="RyuseiLight" src="https://light.ryuseijs.com/images/svg/logo.svg" width="70"> </a>
338 lines (270 loc) • 4.92 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SCSS</title>
<link href="../../../../dist/css/themes/ryuseilight-ryusei.min.css" rel="stylesheet">
</head>
<body>
<h3>Practical Example</h3>
<pre>
/*
* Main styles
*/
:root {
--text-color: #333;
}
body {
color: var( --text-color );
padding: 0 !important;
}
#container {
padding: 2rem 2rem 4rem;
}
@media only screen
and (min-width: 320px)
and (max-width: 480px)
and (resolution: 150dpi) {
body { line-height: 1.4; }
}
@media ( /* ( max-width: 900px ) */ max-width: calc( ( 100px ) - 10 ) ) {
#toc {
background-image: url("/ico\ns/#{ $name }.\"svg");
position: absolute;
#{ $top-or-bottom }: 0;
#{ $left-or-right }: 0;
}
}
@mixin inline-animation( #{ $duration } ) {
$name: inline-#{unique-id()};
@keyframes #{$name} {
@content;
}
animation-name: $name;
animation-duration: $duration;
animation-iteration-count: infinite;
}
.pulse {
@include inline-animation( 2s ) {
from { background-color: yellow }
to { background-color: red }
}
}
#{ $type } {
color: red;
}
/*
* Components
*/
.button {
$root: &;
$inner: 'inner';
#{ $type } {
color: red;
}
/*
font-family: Roboto, 'Avenir Next Pro', sans-serif;
font-size: .9rem;
*/
&__#{ $inner } {
padding: 1rem;
}
&--primary {
color: white;
#{$root}__inner {
background: $main-color;
}
}
&:hover {
background: rgba( 255, 255, 0, .1 );
}
&:active {
outline: 2px solid hsla( 0, 0%, 100%, .6 );
}
&:active {
content: attr( data-title number, 0 );
}
}
@import 'components.css';
</pre>
<h3>Comments/Strings</h3>
<pre>
/**
* Multiline comment
* 'Should not be a string'
* "Should not be a string"
*/
/* Multiline comment in a single line */
// Single line comment
'Single quote'
'Single \'quote\' with escape'
'Single 'quote' with single quote'
'Single "quote" with double quote'
"Double quote"
"Double \"quote\" with escape"
"Double "quote" with double quote"
"Double 'quote' with single quote"
'Multiline \
single \
quote'
"Multiline \
double \
quote"
'/* Should not be a comment */'
"/* Should not be a comment */"
</pre>
<h3>Bracket Position</h3>
<pre>
*{}
body{
padding: 0 !important;
}
body {
padding: 0 !important;
}
body { padding: 0 !important }
body{ padding: 0 !important }
body
{
padding: 0 !important;
}
</pre>
<h3>Selectors And Combinators</h3>
<pre>
* {
box-sizing: border-box;
}
ul {
margin: 0;
}
input[type="submit"] {
padding: 1em 2em;
}
.container {
color: blue;
}
.container .button {
color: blue;
}
.container > .button {
color: blue;
}
.container + .button {
color: blue;
}
.container ~ .button {
color: blue;
}
</pre>
<h3>@rule</h3>
<pre>
@charset "utf-8";
@import url( "style.css" ) body;
@import url( #{ $url } );
@import 'style.css';
@import url( 'style.css' ) screen and ( orientation:landscape );
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@media screen and (max-width: 1000px) {
body {
padding: 3rem;
}
}
@supports (display: grid) {
@supports (display: grid) {
@media screen and (max-width: 1000px) {
.container {
display: grid;
}
}
}
}
@supports not (display: grid) {
@media screen and (max-width: 1000px) {
.container {
display: flex;
}
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
90% {
opacity: 0.2;
}
100% {
opacity: 1;
}
}
</pre>
<h3>Function</h3>
<pre>
.container {
width: calc( 100% - 2rem );
transition: opacity 2s cubic-bezier( .17,.67,.83,.67 );
}
.container::before {
content: attr( data-container-prefix );
}
.container::after {
content: counter( container-counter );
}
</pre>
<h3>Variable</h3>
<pre>
*{ margin: $variable }
*{ $variable: red }
#{ $variable }{ color: red }
#{ $variable } {
color: red;
}
#{ $variable }__something {
color: red;
}
.something__#{ $variable }{ color: red }
.something__#{ $variable }{
color: red;
}
.something__#{ $variable } {
color: red;
}
#{ $variable }__something__#{ $variable } {
color: red;
}
</pre>
<h3>Keyword</h3>
<pre>
* {
!important important initial inherit unset
}
</pre>
<h3>Number</h3>
<pre>
* {
0 1 1.23 .23 +1.23 -1.23
#0033FF #0033ff #333 #CCC #ccc
}
</pre>
<script src="../../../../dist/js/ryuseilight.min.js"></script>
<script src="../../../../dist/js/languages/scss.min.js"></script>
<script>
const ryuseilight = new RyuseiLight();
ryuseilight.apply( 'pre', { language: 'scss' } );
</script>
</body>
</html>