CSS Variables in LWC

-
Few developer like me who do not have UI/UX sight, writing and maintaining CSS takes time.
Thus, few techniques like creating libraries for CSS files, comes very handy.

With Summer 20 release, CSS library components can be created in LWC and can be used by importing library component in .js file and CSS file in .css file.

Library component becomes the one place to change the application styling. However, some attributes values would be repeated all over the library component.
Thus, making changes to application styling, one has to find and update such values.

Thanks to advanced CSS and LWC for support of the standard web components, which lets developer define the custom properties or variables.

Lets dive in how we can use CSS variables.

Where to declare variables in LWC CSS file?

The selector given to the ruleset defines the scope that the custom property/variables can be used. :root is the most common global. However, :root is not available in LWC.

:host pseudo class targets the shadow host of the shadow DOM and ensures your custom properties/variables are scoped to the custom element that contains the shadow DOM

How to declare variables in LWC CSS file? 

:host {
    --left-section-background: antiquewhite;
}

How to use variables in LWC CSS file? 

.leftSection {
    background: var(--left-section-background);
    height: 100%;
}


Thanks for your time to go through the post, hope it helps!

Popular posts from this blog

Create File versions from Apex

-
Image
In Lightning Experience, Salesforce Files unifies your files, documents, and libraries into a single place for easier management. Files can be created from different places like Lightning Components, LWC and integrations i.e. via apex. In majority scenarios, the requirement is around creating a file and associating it with some sObject record.  Below script can be to create a file in Salesforce. HttpRequest req = new HttpRequest () ; req.setEndpoint ( 'https://images.pexels.com/photos/2052217/pexels-photo-2052217.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' ) ; req.setMethod ( 'GET' ) ; HttpResponse res = new Http () .send ( req ) ; if ( res ! = null ) { Blob imageBlob = res.getBodyAsBlob () ; String fileName = 'Ssshhh' ; // Creates the contentversion and implicitly creates content document ContentVersion cv = new ContentVersion () ; cv.Title = fileName; cv.PathOnClient = fileName
Read more

Run as different user in Apex

-
Yes, you read it right; running apex as different user who has higher access levels than logged in user is now possible in Salesforce using Platform Events . Platform events are executed as  Automated Process user . Processing records in system mode or async apex like  batch jobs are the commonly used workarounds for this. However there are few use cases where these workarounds can not help. We are going to see one of such use case. Use Case: If event is created with attendees then, only organizer can edit the event. This is standard Salesforce behavior. And there is business requirement that, attendees should be able to update few fields on event. Solution: Lets first analyze what is event with attendees means. Whenever a event is created with attendees, Salesforce creates separate events for organizer and attendees. These events are linked to each other, any update to organizer event is propogated to all attendee events automatically.  For organizer event IsChild is set to false an
Read more

Creating JKS certificate for JWT Bearer flow in Salesforce

-
JWT stands for Json Web Token. Salesforce supports JWT for authentication however, JWT should be signed using RSA SHA256 algorithm. This algorithm needs private and public key for signature. OpenSSL can be used to create private and public key and the same can be converted to specific certificate format. You can get OpenSSL here . Creating self-signed certificate: Below is the consolidated list of OpenSSL commands to create a self signed certificate. Generate a private key openssl genrsa -des3 -passout pass:<Password> -out server.pass.key 2048 openssl rsa -passin pass:<Password> -in server.pass.key -out server.key Generate a certificate signing request using the server.key file. A challenge password would asked with other information. Keep the passwords same to avoid certificate corruption. openssl req -new -key server.key -out server.csr Generate a self-signed digital certificate from the server.key and server.csr files openssl x509 -req -sha256 -days 365 -in server.csr -
Read more