Adding an Expander The only changes required are to the template and Sass. First, you should start by creating a container element for your expander. This needs to contain two children: a ‘head’ element, which is what always shows and will trigger the expansion when clicked, and a ‘body’ element which is what shows when… Continue reading Hide Content with an Expander
Tag: sass
Issue of adding If in Sass files
void if constructions using exposed Sass variables. For example: @if $sc-color-secondary == $12345 { background-color: $sc-color-primary;} @else { background-color: $56789;} The problem with this is that the frontend does not know the else condition. Passing values within or grouping variables as mixins causes a similar issue. All of these issues are solved during the backend… Continue reading Issue of adding If in Sass files
User-Defined Function Calls in Sass
Avoid user-defined function calls. For example, assuming that $sc-primary-color is also: $sc-color-secondary: myfunc($sc-primary-color) /*editable(…) In this example, you set the result of an exposed variable, such as $sc-color-secondary, to a custom function, myfunc($sc-primary-color). Assuming $sc-primary-color is also declared as editable, when the SMT administrator changes the primary color value, the primary color value compiles quickly… Continue reading User-Defined Function Calls in Sass
How to use multiple SASS in an extension.
When we want to use more than one SASS for an extension then we need to create another SASS inside the extension we want. Then we need to update the manifest.json of the extension like which SASS should acts as a primary or entry SASS. In the above case 2 SASS, pagination and plpextension has… Continue reading How to use multiple SASS in an extension.
UnhandledPromiseRejectionWarning: TypeError: sass.sync is not a function
While running local through git there may a chance of showing sync is not a function error. To resolve this try to fetch the extension/theme from outside folder and copy all foldres and files expect workspace and nsdeploy file and paste to corresponding git folder
SASS
Syntactically Awesome Style Sheet Sass is the most mature, stable, and powerful professional-grade CSS extension language Sass is a CSS pre-processor. It is fully compatible with every version of CSS. Sass reduces the repetition of CSS and therefore saves time. Sass consists of two syntaxes. The original syntax, called “the indented syntax,” uses a syntax similar… Continue reading SASS
Difference between Scss and CSS
Features CSS SCSS Definition CSS is a scripting language that is used to develop a web page. The more advanced variant of CSS is SCSS. It is a pre-processor language that is compiled or interrupted into the CSS. Functions It contains common functions. It contains more advanced features. Code It uses an extensive line of… Continue reading Difference between Scss and CSS
How to center align vertically and horizontally inside a div?
Consider an example given below, To center the image inside this div,