Responsive landing page using grid and flexbox

Community feedback

• 

  LukZap•245

  @LukZapPosted over 4 years ago

  Hi,

  For colors you can define them in your _variables.scss like that: $ColorPrimary: hsl(179, 62%, 43%), and then just import it to your for ex. _grid-component.scss like that: @import './../abstracts/variables';

  And use it:

    &__section-info {
      background-color: $ColorPrimary;
      ...other styles...
    }
  

  1

  ---

  

  Safa Ruknuddin•385

  @safrukPosted over 4 years ago

  @LukZap @LukZap Yeah. But if you want to want to adjust the alpha value in hsla($red, $green, $blue, $alpha) ? For example, using css variables

  --color : hsl(170,54%,43%) ; or atleast something like --color : 170,54%,43%;

  And then manipulating it in any sass partials like so

  &__section-info { backgroundcolor: hsla(170,54%,43%,80%); ... other styles... }

  Right now this same method can be used for rgb/rgba but I when I tried with hsl/hsla using css variables it didn't work

  0

  

  LukZap•245

  @LukZapPosted over 4 years ago

  @safruk
  For me that code works

  &__section-features {
      background-color: rgba($ColorPrimary, 0.5);
      ...
  }
  

  when you define your color as variable $ColorPrimary: hsl(179, 62%, 43%) and pass it to rgba

  1

  

  Safa Ruknuddin•385

  @safrukPosted over 4 years ago

  @LukZap It works with sass variables preceding with $ sign,but not with css variables . I guess sass variables are just more powerful at the moment. Anyway thanks! Appreciate your help

  0

  

  LukZap•245

  @LukZapPosted over 4 years ago

  @safruk

  I think problem is how scss are compiled, because it gives an error when you compile it with background-color: hsla(var(--some-color), 0.4); like Error: Function hsla is missing argument $lightness.

  But when you go to your compiled styles.css and change style of your for ex. .container__section-features to use that syntax background-color: hsla(var(--some-color), 0.4); then it's working.

  1

  

  Safa Ruknuddin•385

  @safrukPosted over 4 years ago

  @LukZap Yeah Exactly.That's what the error was in the console.

  I didn't check by changing in style.css. So it does work logically! Thanks! May be scss wants us to rely on scss variables

  0

  

  LukZap•245

  @LukZapPosted over 4 years ago

  @safruk

  Yeah, that may be the case. No problem.

  0