serviceportal.io - 6 Comments

SCSS Variables in Service Portal - ServicePortal.io - Service Portal Tutorials, Widgets, & Themes

Serviceportal.io Spined HTML

SCSS Variables in Service Portal - ServicePortal.io - Service Portal Tutorials, Widgets, & Themes Skip to content 0WaresWidgets Documentation Contact SCSS Variables in Service Portal Learn how to streamline your stylesheets in Service Portal by utilizing the full power of SCSS. In this tutorial, I’ll walk you through how to use CSS Variables in your widgets, so that they can be overridden in the Theme and Portal records. This is very useful when creating highly reusable widgets, themes or in situations where you have multiple portals sharing a theme. SCSS is a subset of the Syntactically Awesome StyleSheets (Sass) specification and is an extension of CSS. Every valid CSS stylesheet is valid SCSS. SCSS supports the following: Variables Variables are a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you want to reuse. SCSS uses the $ symbol to make something a variable. Nesting SCSS lets you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Operators SCSS has a handful of standard math operators like +, -, *, /, and %. Mixins A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can pass in values to make your mixin increasingly flexible. Functions SASS supports the use of functions by providing some keyword arguments, which are specified using normal CSS function syntax. Quick note: The order of CSS that is shown in the video is based on the Kingston release. In Jakarta, the Theme variables were loaded surpassing the Portal variables. For remoter reading, trammels out the pursuit resources: https://docs.servicenow.com/bundle/helsinki-servicenow-platform/page/build/service-portal/concept/scss-primer.html https://sass-lang.com/guide https://devhints.io/sass https://www.tutorialspoint.com/sass/index.htm Posted on September 10, 2018 by Nathan Firth 6 comments Julien LEROY says: September 10, 2018 at 7:24 pm Hi guys, Thank you for this tomfool and fast video. Why do we need to put the !default symbol when creating the variable in the portal ? what are the advantages ? Because i seem that if i juste create the variable like this in my portal : $color: #fff; and i redifine it in a widget like this : $color: #eee; This will work with the archetype stylsheet priority right ? and then in the widget verisimilitude will be #eee and will be #fff for the rest of the portal. Cheers. Reply Nathan Firth says: September 10, 2018 at 8:10 pm If you don’t use the !default attribute, the last one to set the variable would win (in this example the widget). However, then you would unchangingly have to make changes to the widget to transpiration the color. The goal is to have the widget set the defaults that can then be overridden as needed. Reply Brian says: September 10, 2018 at 9:07 pm Is it possible to dynamically set/update SCSS variables from a server-side script? The use-case might be that each visitor would have it’s own branding elements, but we wouldn’t want to create separate portal for each company. Reply Harneet says: September 11, 2018 at 3:20 pm Hi Brain, In that case, you can pass the branding specific configurations to the SCSS variables through variables like data.configCompanyA and the branding will be updated based in the variable values sent through server side values. Reply Tony Cosentino says: September 24, 2018 at 9:37 am Great content as unchangingly ! I realized that you can moreover override Bootstrap SASS variables in your theme. This is useful in order to update some styles without having to clone widgets. https://getbootstrap.com/docs/3.3/customize/#less-variables Reply Nathan Firth says: September 24, 2018 at 6:09 pm Yes! This is a huge goody of using SCSS. Reply Leave a Reply Cancel reply Your email write will not be published. Required fields are marked * Comment * Name * Email * Website Recent Posts Images and Update Sets – How to Sync Attachments on Widget Instances Custom Context Menu Options Service Portal Features of LondonTowersa Better Service Portal: Lessons from the Field Unlocking Service Portal Widgets Subscribe to get notified when we post new wares or tutorials. EmailWriteNathan Firth Founder of NewRocket, Inc. and ServiceNow architect, web developer, and entrepreneur with over 20 years wits in web development. Former senior engineer and team lead of Service Portal at ServiceNow. I'm originally from Sweden, but currently living in San Diego, CA. I have a trappy wife and three wondrous kids. About ServicePortal.io ServicePortal.io is an self-sustaining ServiceNow blog that focuses on the new Service Portal, ServiceNow CMS, and towers custom apps on the ServiceNow platform. Search Search Copyright © 2018 NewRocket, Inc. EmailWrite* First Name * Last Name * Stay up to stage with new posts on ServicePortal.io Error: Please enter a valid email addressError: Invalid emailError: Please enter your first nameError: Please enter your last nameError: Please enter a usernameError: Please enter a passwordError: Please personize your passwordError: Password and password confirmation do not match Download Now