Skip to content

Instantly share code, notes, and snippets.

@Zmetser
Created April 30, 2022 07:59
Show Gist options
  • Save Zmetser/3846b421e783e993d4745a67ab1543c0 to your computer and use it in GitHub Desktop.
Save Zmetser/3846b421e783e993d4745a67ab1543c0 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// https://sass-lang.com/
// Preprocessing
/*************
* Variables *
*************/
$base-color: #bada55; // nincs kulonbseg a - es _ kozott $base_color == $base-color
$string: "";
$border-dark: rgba($base_color, 0.8);
// - Scope
$global-variable: "";
.content {
$local-variable: "";
}
.sidebar {
content: $global-variable; // $local-variable nem erheto el
}
// -- Shadowing
.content-shadow {
$base-color: blue;
background-color: $base-color;
border-color: $border-dark;
}
.content {
background-color: $base-color;
}
// -- Interpolation
// https://sass-lang.com/documentation/interpolation
$name: "display";
// #{kifejezes}
.icon-#{$name} { content: ""; }
.foo-#{5+2} { content: ""; }
.majdnem-mindehol { #{$name}: 'block' }
/***********
* Nesting *
***********/
.navigation {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
a {
display: block;
padding: 6px 12px;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
// vagy
a:hover {
text-decoration: underline;
}
}
}
/* Parent Selector */
.alert {
// The parent selector can be used to add pseudo-classes to the outer
// selector.
&:hover {
font-weight: bold;
}
div {
text-decoration: underline;
}
// It can also be used to style the outer selector in a certain context, such
// as a body set to use a right-to-left language.
[dir=rtl] & {
margin-left: 0;
margin-right: 10px;
}
// You can even use it as an argument to pseudo-class selectors.
:not(&) {
opacity: 0.8;
}
}
.alert [dir=rtl] {}
[dir=rtl] .alert {}
/**********
* Mixins *
**********/
// https://sass-lang.com/documentation/at-rules/mixin
@mixin flexCenter {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
}
div {
@include flexCenter
}
.masikElem {
@include flexCenter;
background-color: blue;
}
@mixin theme($theme: blue, $asd: 'asd') { // optional argument
background: $theme;
box-shadow: 0 0 1px rgba($theme, .25);
color: #fff;
}
.info {
// @include flex;
@include theme;
}
.alert {
@include theme($theme: red);
}
.success {
@include theme($theme: green);
}
// - Content blocks
@mixin hover {
&:not([disabled]):active,
&:not([disabled]):focus,
&:not([disabled]):hover {
@content;
}
}
.button {
border: 1px solid black;
@include hover {
border-width: 2px;
text-decoration: underline;
}
}
// - Interpolation example
@mixin rtl($property, $ltr-value, $rtl-value) {
#{$property}: $ltr-value;
[dir=rtl] & {
#{$property}: $rtl-value;
}
}
.sidebar {
@include rtl(float, left, right);
@include rtl(display, block, none);
}
// Extend/Inheritance
// Operators
// Partials
// Modules
// https://sass-lang.com/documentation/variables#default-values
// https://sass-lang.com/documentation/variables#built-in-variables
/*************
* Variables *
*************/
.sidebar {
content: "";
}
.content-shadow {
background-color: blue;
border-color: rgba(186, 218, 85, 0.8);
}
.content {
background-color: #bada55;
}
.icon-display {
content: "";
}
.foo-7 {
content: "";
}
.majdnem-mindehol {
display: "block";
}
/***********
* Nesting *
***********/
.navigation ul {
margin: 0;
padding: 0;
list-style: none;
}
.navigation li {
display: inline-block;
}
.navigation li a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
.navigation li a:hover {
text-decoration: underline;
}
.navigation li a:hover {
text-decoration: underline;
}
/* Parent Selector */
.alert:hover {
font-weight: bold;
}
.alert div {
text-decoration: underline;
}
[dir=rtl] .alert {
margin-left: 0;
margin-right: 10px;
}
:not(.alert) {
opacity: 0.8;
}
/**********
* Mixins *
**********/
div {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
}
.masikElem {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
background-color: blue;
}
.info {
background: blue;
box-shadow: 0 0 1px rgba(0, 0, 255, 0.25);
color: #fff;
}
.alert {
background: red;
box-shadow: 0 0 1px rgba(255, 0, 0, 0.25);
color: #fff;
}
.success {
background: green;
box-shadow: 0 0 1px rgba(0, 128, 0, 0.25);
color: #fff;
}
.button {
border: 1px solid black;
}
.button:not([disabled]):active, .button:not([disabled]):focus, .button:not([disabled]):hover {
border-width: 2px;
text-decoration: underline;
}
.sidebar {
float: left;
display: block;
}
[dir=rtl] .sidebar {
float: right;
}
[dir=rtl] .sidebar {
display: none;
}
{
"sass": {
"compiler": "dart-sass/1.32.12",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment