scss 上海社会科学院

Posted 2021-05-18

//Extend/Inheritance
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}
//------------------------------------------------------------------------------
.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  border-color: green;
}
.error {
  border-color: red;
}
.warning {
  border-color: yellow;
}

//Mixins
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
.box { @include border-radius(10px); }
//------------------------------------------------------------------------------
.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

//IMPORT
//myApp/css/_reset.scss
html,body,ul,ol {
   margin: 0;
  padding: 0;
}
//myApp/css/base.scss
@import 'reset';
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

//Nesting
nav{
  ul{
    margin:0;
    padding:0;
    list-style:none;
  }
  li{display:inline-block;}
  a{
    display:block;
    padding:6px 12px;
  }
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
//------------------------------------------------------------------------------
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
}

//VARIABLES
$font: Helvetica, sans-serif;
$primary-color:#333;

body{
  font:100% $font;
  color:$primary-color;
}
//------------------------------------------------------------------------------
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

yum install curl
curl -sL https://rpm.nodesource.com/setup | bash -

yum install nodejs
node -v

npm update -g npm
npm install -g grunt-cli

yum install ruby
ruby -v 

gem install sass //instala sass desde ruby
sass -v

cd /var/www/myProyecto
nmp install (instala las dependencias de packaje.json)

//PARENT SELECTOR &
a{
  color:red;
  &:hover{
    text-decoration:underline;
  }
}

.boton{
  &-ok{ color: green;}
  &-error{color:red;}
}

.abuelo{
  .padre{
    & > h1{
      color:red;
    }    
  }
}
//------------------------------------------------------------------------------
a {
  color: red;
}
a:hover {
  text-decoration: underline;
}

.boton-ok {
  color: green;
}
.boton-error {
  color: red;
}

.abuelo .padre > h1 {
  color: red;
}

//OPERATORS + - * /
.container { width: 300px / 960px * 100%; }
//------------------------------------------------------------------------------
.container {
  width: 31.25%;
}