css样式优化示例

1.如何优化以下代码?

.box {
  width: 100px;
  height: 100px;
}

.redBox {
  background-color: red;
}

.yellowBox {
  background-color: yellow;
}

.blueBox {
  background-color: blue;
}

您可以将这段代码优化为使用SCSS的嵌套规则来减少重复代码。以下是优化后的代码示例:

.box {
  width: 100px;
  height: 100px;

  &.redBox {
    background-color: red;
  }

  &.yellowBox {
    background-color: yellow;
  }

  &.blueBox {
    background-color: blue;
  }
}

mac重点关注目录

/usr/local/bin
/usr/local/Cellar
/usr/local/var
/usr/local/lib/ruby/gems/
/usr/local/var/homebrew/linked/
/Users/lixiang/Library
/Users/lixiang/Library/Application Support

mac环境变量记录

source ~/.bash_profile

# python3
export PATH=${PATH}:/usr/local/Cellar/python@3.11/3.11.6/bin
alias python="/usr/local/Cellar/python@3.11/3.11.6/bin/python3.11"
# python3 end

# flutter
export FLUTTER_GIT_URL=git@gitee.com:mirrors/Flutter.git
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH="$PATH:/Users/lixiang/Flutter/bin"
# flutter end

# pnpm
export PNPM_HOME="/Users/lixiang/Library/pnpm"
export PATH="$PNPM_HOME:$PATH"
# pnpm end

# nvm
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
# nvm end

# 把所有的gem应用程序都加到系统环境变量路径
export PATH=/usr/local/lib/ruby/gems/3.1.0/bin:$PATH
# 把所有的gem应用程序都加到系统环境变量路径 end