Sass - Revision history

Iwiseman: /* Control Directives */

2021-04-28T14:35:11Z

Control Directives

@@ Line 333: / Line 333: @@
 ==Control Directives==
 <syntaxhighlight lang="scss">
 </syntaxhighlight>

2021-04-28T14:28:08Z

Functions

← Older revision		Revision as of 14:28, 28 April 2021
Line 320:		Line 320:

	==Functions==		==Functions==
			We can define functions such as
	<syntaxhighlight lang="scss">		<syntaxhighlight lang="scss">
			$app-width: 100px
			@function column-width($cols) {
			@return ($app-width / $cols) - ($cols * 5px);
			}

			.col2 {
			width: column-width(2);
			}
	</syntaxhighlight>		</syntaxhighlight>

	==Control Directives==		==Control Directives==
	<syntaxhighlight lang="scss">		<syntaxhighlight lang="scss">
	</syntaxhighlight>		</syntaxhighlight>

2021-04-28T14:25:56Z

Mixens

← Older revision		Revision as of 14:25, 28 April 2021
Line 305:		Line 305:

	==Mixens==		==Mixens==
			Mixins allow us to define functions to reduce duplication. E.g. for rounded corners. Note the 5px does not need to be specified. It is just a default value
	<syntaxhighlight lang="scss">		<syntaxhighlight lang="scss">
			@mixen .rounded-corners-all($size: 5px) {
			border-radius: $size;
			-webkit-border-radius: $size;
			-moz-border-radius: $size
			}

			#form
			{
			@include .rounded-corners-all(5px);
			}
	</syntaxhighlight>		</syntaxhighlight>

	==Functions==		==Functions==
	<syntaxhighlight lang="scss">		<syntaxhighlight lang="scss">

2021-04-28T14:21:35Z

Importing

← Older revision		Revision as of 14:21, 28 April 2021
Line 287:		Line 287:

	==Importing==		==Importing==
			Nothing special. Just use @import
	<syntaxhighlight lang="scss">		<syntaxhighlight lang="scss">
			@import "foo"
	</syntaxhighlight>		</syntaxhighlight>
	==Extending==		==Extending==
			We can extend rules by using the @extend and the rule to extend
	<syntaxhighlight lang="scss">		<syntaxhighlight lang="scss">
			.button {
			color: black
			}

			.submit-button {
			@extend .button
			border: 1px Black solid;
			}
	</syntaxhighlight>		</syntaxhighlight>

	==Mixens==		==Mixens==
	<syntaxhighlight lang="scss">		<syntaxhighlight lang="scss">

2021-04-28T14:16:47Z

Nested Rules

@@ Line 265: / Line 265: @@
+        }
+     }
+}
 </syntaxhighlight>

2021-04-28T14:10:36Z

Rules

@@ Line 234: / Line 234: @@
+}
 </syntaxhighlight>
-==Rules==
+==Nested Rules==
 <syntaxhighlight lang="scss">
 ==Importing==
 <syntaxhighlight lang="scss">

2021-04-28T14:07:15Z

SASS

@@ Line 190: / Line 190: @@
 ==SASS on the Server==
 ==Variables==
 ==Rules==
 ==Importing==
-==Extending==
+<syntaxhighlight lang="scss">
 ==Mixens==
 ==Functions==
 ==Control Directives==

2021-04-28T13:48:20Z

Intro

← Older revision		Revision as of 13:48, 28 April 2021
Line 183:		Line 183:
	=SASS=		=SASS=
	==Intro==		==Intro==
			*Syntactically Awesome StyleSheets
			*Compiles to CSS
			*Add programming features
			*Two formats SASS and SCSS
			This does not cover SASS but only the SCSS format

	==SASS on the Server==		==SASS on the Server==
	==Variables==		==Variables==

2021-04-28T13:45:27Z

JavaScript

2021-04-28T13:43:10Z

JavaScript

← Older revision		Revision as of 13:43, 28 April 2021
Line 178:		Line 178:
	We can use back quotes to execute javascript		We can use back quotes to execute javascript
	<syntaxhighlight lang="less">		<syntaxhighlight lang="less">
	@root: "/images/"		@root: "/images/";
	@app-root:`"@{root}".toUpperCase()`;		@app-root:`"@{root}".toUpperCase()`;
	</syntaxhighlight>		</syntaxhighlight>