SASS

/* master sass designcode */

/*1.  variables */

$primary: blue
$secondary: green
$dark: #000
$darkOpacity: rgba($dark,0.4)
$font-size: 3rem
/* esto seria para brand, para tener un indentificador del proyecto */
$brand: 'dsc'

.#{$brand}-title-primary
    font-size: $font-size
    color: $primary

.#{$brand}-title-secondary
    font-size: $font-size
    color: $secondary

.#{$brand}-title-dark
    color: $darkOpacity

/* 2. NESTING,
usar un atributo que compartan el prefijo sin necesidad de repetirlo,para
clases y para propiedades y atributos
Muchas veces tenemos propiedades que
tienen el mismo prefijo, como Fontfamily, Font-size y Font-weight o textalign,
text-transform y text-overflow.*/

    font:
        size: $font-size
        weight: 20px
        family: Arial, "Helvetica Neue", Helvetica, sans-serif

/* 3.b nesting */
.#{$brand}-card
    width: 200px
    padding: 0
    border:
        radius: 50px
        width: 1px
        style: solid
        color: $secondary

    img
        width: 100%
        height: 150px
        display: block

    h1
        height: 50px
        line-height: 50px
        margin: 0

1
3. AMPERSAND &

Por medio del operador ampersand (&) podemos copiar el se padre de las llaves para ser sustituido en
la regla de estilo.
/* Con el fichero .html proporcionado, utiliza el operador & de Sass para que
los botones queden lo más parecido posible a la imagen adjunta. Los botones
deben estar horizontalmente alineados y en el centro exacto de la página.
Añadir las propiedades que consideréis, colores, fondos, etc. Pero las pseudo
clases que debéis usar son: hover, visited, active, focus, focus-visible y
target. */

body{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: rgb(51,51,51);
}

#botones{
  
    position: absolute;
    top: 45%;
    input{
        width:270px;
        height: 60px;
        margin-left: 30px;
        border:3px solid white;
        color: white;
        background-color: rgb(51,51,51);
        font-size: 25px;
        &:hover{
            color:red;
            border:6px solid red;
    }
        &:visited{
            background-color:yellow
    }
        &:active{
            text-decoration:underline ;
            color: orange;
    }
         &:focus{
            background-color:rgb(0,207,209)
    }
        &:focus-visible{
            color:burlywood;
    }
        &:target{
            box-shadow: 5px 10px 4px grey;
    }
  }
  
}

2
// 4. IMPORTS

// solo me coge bien el primero

@import '../sass'

@import '../variables para importar/var';

h4{
    color:$}

//5. SELECTOR PLACEHOLDER

Sass tiene un selector conocido como “marcador de posición”.
• Se parece y actúa mucho como un selector de clases, pero
comienza con %, y no está incluido en la salida CSS.

%btn{
    height: 40px;
    min-width: 100px;
    border-radius: 5px;
    color: white;
    font-size: 16px;
    margin: 5px 0;
    box-shadow: 2px 2px 5px 2px gray;
    &:hover{
        cursor: pointer;
  }
}

.#{brand}-btn-primary{
    @extend %btn;
    background-attachment: $primary;
}

// equivaldria a esto

.#{$brand}-btn-
    &primary, &success, &danger
        @extend %btn
    &primary
        background: $primary
    &success
        background: $secondary

3
// 6. GENERAR CLASES
selector padre, como a partir de una clase se generan subclases, que
seria .btn-outline-primary

.btn-outline
    border-radius: 5px
    color: white
    font-size: 16px
    margin: 5px 0
    cursor: pointer
        &-primary
            border: 1px solid $primary
            color:$primary
            &:hover
                background-color: white
        &-success
            border: 1px solid $primary
            color:$secondary      

// 7. MIXIN

interpolacion, mixin es como una funcion, mientras no se ejecute no hace nada

@mixin button ($name,$color)

    .btn-outline:#{$name}
        border:1px solid $color
        color:$color
        &:hover
            background-color: #fff
// lo ejecutamos

@include button ('primary',$primary)

@include button ('success',$secondary)

// hacerlo con & y combinarlo con el codigo anterior

@mixin button ($name,$color)

    &-#{$name}
        border:1px solid $color
        color:$color
        &:hover
            background-color: #fff    

.btn-outline
    border-radius: 5px
    color: white
    font-size: 16px
    margin: 5px 0
    cursor: pointer
    @include button ('primary',$primary)
    @include button ('success',$secondary)

4
// mixin size

@mixin size($h,$w,$p,$m,$bg)
    height: $h
    width: $w
    padding: $p
    margin: $m
    background: $bg

.im
    &-container
        @include size(200px,200px,1rem,1rem,red)
        &-big
            @include size(500px,700px,1rem,1rem,red)

/** 9. listas **/

$colors: $primary, $success, $danger

h1{
    /** aqui lo hacemos es coger el color de success **/
    color:nth($color,2)}

/** 9.1 each **/

@mixin button ($name,$color)

    .btn-outline:#{$name}
        border:1px solid $color
        color:$color
        &:hover
            background-color: #fff

$colors2:'primary' $primary, 'success' $success,'danger' $danger, 'blue'

rgb(21,8,212)

    @each $name,$colors in $colors2{

        @include button ($name,$colors)
    
  }
          **/
/** 10. maps  **/

$pallete:
    'primary':rgb(26,11,107)
    'secondary':rgb(12,204,70)
    'success': rgb(231,47,56)
    'blue':rgb(21,8,212)

h1
    color:map-get($map:$pallete,$key:'secondary')

5
/** 11. funciones **/

.alert
    &-primary:
        width: calc(100%-1rem-30px)
        padding: 15px
        margin:0.5rem

@function color($name)
    @return map-get($map:$pallete,$key:$name)

h1
    color:color('primary')

@function reduceColor($name,$amount)
    @return rgba($name,$amount)

/** 12. sentencia if else **/

@function changeColor($name,$type:darken,$amount:1,$colorMix:#fff)
    $color:color($name) //funcion color()
    @if $type== darken
        $color:darken($color,$amout)// darken es propio de css, es para oscurecer un
color
    @else if $type== lighten
        $color:lighten($color,$amount)
    @else if $type==mixcolor
        $findcolor:color($colorMix)
        @if $findcolor
            $colorMix:$findcolor

    @else
        //add opacity
        $color:rgba($color,$amount)
    @return $color
h1
    changeColor('primary', darken,15)

/** 13. each **/

// creo 4 clases con size de lo que sea por ....
$titles: 16, 20 ,24, 32

@each $size in $titles

     .title-#{$size}
         font-size:$size *1px

6
// 13.2

$titles: (
    "xs":16px,
    "md":20px ,
    "lg":24px,
    "xl":32px)

@each $name,$size in $titles

     .title-#{$name}
         font-size:$size *1px

/** 13.3  **/

/**  porque se le quitna los parentesis, no funcionaria?? **/
/** nombre, fonsize y font weight **/
$titles: "xs" 16px 400,"md" 20px 500,"lg" 24px 600, "xl" 32px 900

@each $name,$size,$fw in $titles

     .title-#{$name}
         font-size:$size *1px
        font-weight: $fw

/** 14. for **/

table
    border-collapse: collapse
    td
        padding: 10px
        border-left: 1 px solid blue

@for $col from 1 throught 6

    tr:nth-child(#{$col})
        background-color: linear-gradient(to bottom, lighten(rgb(59,59,194),($col-
1)*5%,lighten(rgb(59,59,194),($col)*5%))