3

I am working on creating a form in a lightning component. I have a few questions I am using the CSS styling from salesforce lightning design system. Image -1

Image-2

Image-3

Image-4

What is SCSS mean?

I just copied and paste in the styling section of my Lightning component , it is showing me errors..

For example , in the images you can find a statement , @ include square(1px) --- What does that mean ? What is theuse? Do I need to import/include any styling components / files into my salesforce component to make them work?

other one @ include form-states --- what is the use and what does this statement do?

Can anyone give me brief styling overview for styling the pages in lightning applications?

I am unable to follow the slds.....

  • Anyone reply – Rann Dec 4 '15 at 19:49
1

I think your best bet is to take a look at the Lightning Components Developer Guide, they have a quick start in Chapter 2 that walks you through both creating a form and using the lightning design system CSS framework, you don't need to rewrite the css, just include the slds resource. Example from the guide:

<aura:application>
    <!-- Define the Design System static resource (version 0.9.0) -->
    <ltng:require styles="/resource/slds090/assets/styles/salesforce-lightning-design-system.min.css"/>
    <div class="slds">
        <div class="slds-page-header">
          <div class="slds-grid">
            <div class="slds-col slds-has-flexi-truncate">
              <p class="slds-text-heading--label">Expenses</p>
              <div class="slds-grid">
                <div class="slds-grid slds-type-focus slds-no-space">
                  <h1 class="slds-text-heading--medium slds-truncate" title="My
Expenses">My Expenses</h1>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
</aura:application>
0

SCSS shows the style markup using SASS (http://sass-lang.com/) - it's kind of an own language allows you writing more powerful (with less pain) CSS files, but it has to be compiled / translated to browser-conform CSS.

As Jenny B mentioned, when using the SLDS you don't need the adjust the SCSS file, just use the class names given in the documentation.

If you indeed want to compile and probably extend the SLDS from source you should start here downloading the whole project: https://github.com/salesforce-ux/design-system - but from my point of view monkey patching isn't recommended, better would be writing your own CSS classes based on the given ones.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.