+ Start a Discussion
Abhilash MAbhilash M 

I would like to know how to use salesforce lightning design system

I would like to know how to use sldsI am trying to use the salesforce lightning design system for styling my application. I am just copying and pasting the code which are present  in slds for various components , Still I am getting an error in my CSS component of my App.

How to use the   SCSS of the slds in our App.?

I have referred to the Trailhead, STill  I am not able to figure out how to use the styling slds in my app?

For example :I am using the SCSS of forms component here 


.slds-input {
  @include form-states;
  display: inline-block;
  padding: 0 $spacing-medium 0 $spacing-small;
  line-height: $line-height-button;
  min-height: calc(#{$line-height-button} + 2px); /* For IE */
}

.slds-input--small {
  @include placeholder($weight: $font-weight-regular);
  line-height: $line-height-button-small;
  min-height: calc(#{$line-height-button-small} + 2px); /* For IE */
  padding: {
    left: $spacing-x-small;
    right: $spacing-x-small;
  }
}

.slds-input--bare {
  background-color: transparent;
  border: none;
  color: $color-text-default;

  &:focus,
  &:active {
    outline: 0;
  }
}

.slds-input-has-icon {
  position: relative;

  .slds-input__icon {
    @include square($square-icon-medium-content);
    position: absolute;
    top: 50%;
    margin-top: (($square-icon-medium-content / 2) * -1);

    @include deprecate("0.20.0") {
      fill: $color-text-icon-default;
    }
  }

  &--left {
    .slds-input__icon {
      left: $spacing-small;
    }

    .slds-input,
    .slds-input--bare {
      padding-left: $spacing-x-large;
    }
  }

  &--right {
    .slds-input__icon {
      right: $spacing-small;
    }

    .slds-input,
    .slds-input--bare {
      padding-right: $spacing-x-large;
    }
  }
}

what does the @include form-states;  refer to ? what is the use in CSS?
pconpcon
In SASS and CSS import includes another SASS/CSS file.  So you would have to have a SASS/CSS file named 'form-states' relative to the current SASS/CSS declaration for it to import.

NOTE: When including code please use the "Add a code sample" button (icon <>) to increase readability and make it easier to reference.